门店地图

vue-admin-template-master/src/views/shapmap/map/index.vue

@@ -1,18 +1,5 @@
 <template>
   <div class="content">
-    <el-row class="search-row">
-      <el-col :span="5">
-        <div class="grid-content bg-purple">
-          <el-input id="keyword" v-model="searchValue" placeholder="请输入地址"></el-input>
-        </div>
-      </el-col>
-
-      <el-col :span="12">
-        <div class="grid-content bg-purple-light">
-          <el-button type="primary" @click="searchKeyword">搜索</el-button>
-        </div>
-      </el-col>
-    </el-row>
     <div id="container">门店地图</div>
   </div>
 </template>
@@ -25,7 +12,7 @@ var searchService,
 export default {
   data() {
     return {
-      searchValue: "",
+      searchValue: ""
     };
   },
   mounted() {
@@ -34,109 +21,57 @@ export default {
   },
   methods: {
     async init() {
-      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      //步骤：定义map变量 调用 TMap.Map() 构造函数   获取地图显示容器
       //设置地图中心点
-      var myLatlng = new qq.maps.LatLng(31.169083, 121.432358);
+      var myLatlng = new TMap.LatLng(31.169083, 121.432358);
       //定义工厂模式函数
       var myOptions = {
         zoom: 12, //设置地图缩放级别
-        center: myLatlng, //设置中心点样式
-        mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
+        center: myLatlng //设置中心点样式
+        // mapTypeId: TMap.MapTypeId.ROADMAP //设置地图样式详情参见MapType
       };
       //获取dom元素添加地图信息
-      var map = new qq.maps.Map(
-        document.getElementById("container"),
-        myOptions
-      );
-      //   new qq.maps.MarkerImage(shop_icon);
+      var map = new TMap.Map(document.getElementById("container"), myOptions);
+      //   new TMap.MarkerImage(shop_icon);
       let res = await this.getData();
-      res.forEach((v) => {
-        let marker = new qq.maps.Marker({
-          position: new qq.maps.LatLng(v.latitude - 0, v.longitude - 0),
-          map: map,
-        });
-        marker.setIcon(
-          new qq.maps.MarkerImage(
-            shop_icon
-            // new qq.maps.Size(28, 34),
-            // new qq.maps.ScaleSize(28, 34)
-          )
-        );
-        //获取标记的点击事件
-        let info = new qq.maps.InfoWindow({
-          map: map,
-        });
-        qq.maps.event.addListener(marker, "click", function () {
-          info.open();
-          info.setContent(
-            `<div style="text-align:center;white-space:nowrap;margin:10px;">${v.name}(${v.id})</div>`
-          );
-          info.setPosition(new qq.maps.LatLng(v.latitude - 0, v.longitude - 0));
-        });
+      let geometries = [];
+      res.forEach(v => {
+        if (v.gdlat) {
+          geometries.push({
+            styleId: "circle",
+            center: new TMap.LatLng(v.gdlat, v.gdlng),
+            // position: new TMap.LatLng(v.lat, v.lng),
+            radius: 3000
+          });
+        }
       });
 
-      var latlngBounds = new qq.maps.LatLngBounds();
-      //设置Poi检索服务，用于本地检索、周边检索
-      searchService = new qq.maps.SearchService({
-        //设置搜索范围为北京
-        location: "上海",
-        //设置搜索页码为1
-        pageIndex: 1,
-        //设置每页的结果数为5
-        pageCapacity: 5,
-        //设置展现查询结构到infoDIV上
-        panel: document.getElementById("infoDiv"),
-        //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
-        autoExtend: true,
-        //检索成功的回调函数
-        complete: function (results) {
-          //设置回调函数参数
-          var pois = results.detail.pois;
-          for (var i = 0, l = pois.length; i < l; i++) {
-            var poi = pois[i];
-            //扩展边界范围，用来包含搜索到的Poi点
-            latlngBounds.extend(poi.latLng);
-            var marker = new qq.maps.Marker({
-              map: map,
-              position: poi.latLng,
-            });
-
-            marker.setTitle(i + 1);
-
-            markers.push(marker);
-          }
-          //调整地图视野
-          map.fitBounds(latlngBounds);
-        },
-        //若服务请求失败，则运行以下函数
-        error: function () {
-          that.$message.error("请输入正确地址！");
+      var circle = new TMap.MultiCircle({
+        map,
+        styles: {
+          // 设置圆形样式
+          circle: new TMap.CircleStyle({
+            color: "rgba(41,91,255,0.16)",
+            showBorder: true,
+            borderColor: "rgba(41,91,255,1)",
+            borderWidth: 1
+          })
         },
+        geometries
       });
     },
     getData() {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         fetch("https://talk.cirray.cn/api/shops")
-          .then(function (response) {
+          .then(function(response) {
             return response.json();
           })
-          .then(function (myJson) {
+          .then(function(myJson) {
             resolve(myJson);
           });
       });
-    },
-    searchKeyword() {
-      this.clearOverlays(markers);
-      //根据输入的关键字在搜索范围内检索
-      searchService.search(this.searchValue);
-    },
-    clearOverlays(overlays) {
-      var overlay;
-      while ((overlay = overlays.pop())) {
-        overlay.setMap(null);
-      }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -146,7 +81,7 @@ export default {
 }
 #container {
   width: 100%;
-  height: 85vh;
+  height: 90vh;
 }
 .search-row {
   padding-bottom: 20px;

vue-admin-template-master/src/views/shapmap/marker/index.vue

@@ -1,19 +1,5 @@
 <template>
   <div class="content">
-    <el-row class="search-row">
-      <el-col :span="5">
-        <div class="grid-content bg-purple">
-          <el-input id="keyword" v-model="searchValue" placeholder="请输入地址"></el-input>
-        </div>
-      </el-col>
-
-      <el-col :span="12">
-        <div class="grid-content bg-purple-light">
-          <el-button type="primary" @click="searchKeyword">搜索</el-button>
-        </div>
-      </el-col>
-    </el-row>
-
     <div id="container">门店覆盖区域</div>
     <!-- <div style="width: 500px; height: 180px" id="infoDiv"></div> -->
   </div>
@@ -26,7 +12,7 @@ var searchService,
 export default {
   data() {
     return {
-      searchValue: "",
+      searchValue: ""
     };
   },
   mounted() {
@@ -35,158 +21,55 @@ export default {
   },
   methods: {
     async init() {
-      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      //步骤：定义map变量 调用 TMap.Map() 构造函数   获取地图显示容器
       //设置地图中心点
-      var myLatlng = new qq.maps.LatLng(31.169083, 121.432358);
+      var myLatlng = new TMap.LatLng(31.169083, 121.432358);
       //定义工厂模式函数
       var myOptions = {
         zoom: 12, //设置地图缩放级别
-        center: myLatlng, //设置中心点样式
-        mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
+        center: myLatlng //设置中心点样式
       };
       //获取dom元素添加地图信息
-      var map = new qq.maps.Map(
-        document.getElementById("container"),
-        myOptions
-      );
-      //   new qq.maps.MarkerImage(shop_icon);
+      var map = new TMap.Map(document.getElementById("container"), myOptions);
       let res = await this.getData();
-      res.forEach((v) => {
-        if (v.category == 2) {
-          new qq.maps.Circle({
-            //圆形的中心点坐标。
-            center: new qq.maps.LatLng(v.latitude - 0, v.longitude - 0),
-            //圆形是否可点击。
-            clickable: true,
-
-            //鼠标在圆形内的光标样式。
-            cursor: "pointer",
-
-            //圆形的填充色，可通过Color对象的alpha属性设置透明度。
-            // fillColor: "#F56C6C",
-            fillColor: new qq.maps.Color(50, 150, 190, 0.3),
-
-            //要显示圆形的地图。
-            map: map,
-
-            //圆形的半径。
-            radius: 5000,
-
-            //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
-            strokeColor: "#fff",
-
-            //圆形的边框样式。实线是solid，虚线是dash。
-            strokeDashStyle: "solid",
-
-            //圆形的边框线宽。
-            strokeWeight: 1,
-
-            //圆形是否可见。
-            visible: true,
-
-            //圆形的zIndex值。
-            zIndex: 1000,
-          });
-        } else {
-          new qq.maps.Circle({
-            //圆形的中心点坐标。
-            center: new qq.maps.LatLng(v.latitude - 0, v.longitude - 0),
-            //圆形是否可点击。
-            clickable: true,
-
-            //鼠标在圆形内的光标样式。
-            cursor: "pointer",
-
-            //圆形的填充色，可通过Color对象的alpha属性设置透明度。
-            //fillColor: "#00f",
-            fillColor: new qq.maps.Color(0, 15, 255, 0.3),
-
-            //要显示圆形的地图。
-            map: map,
-
-            //圆形的半径。
-            radius: 3000,
-
-            //圆形的边框颜色，可通过Color对象的alpha属性设置透明度。
-            strokeColor: "#fff",
-
-            //圆形的边框样式。实线是solid，虚线是dash。
-            strokeDashStyle: "solid",
-
-            //圆形的边框线宽。
-            strokeWeight: 1,
-
-            //圆形是否可见。
-            visible: true,
-
-            //圆形的zIndex值。
-            zIndex: 1000,
+      let geometries = [];
+      res.forEach(v => {
+        if (v.gdlat) {
+          geometries.push({
+            styleId: "circle",
+            center: new TMap.LatLng(v.gdlat, v.gdlng),
+            // position: new TMap.LatLng(v.lat, v.lng),
+            radius: 3000
           });
         }
       });
 
-      var latlngBounds = new qq.maps.LatLngBounds();
-      //设置Poi检索服务，用于本地检索、周边检索
-      searchService = new qq.maps.SearchService({
-        //设置搜索范围为北京
-        location: "上海",
-        //设置搜索页码为1
-        pageIndex: 1,
-        //设置每页的结果数为5
-        pageCapacity: 5,
-        //设置展现查询结构到infoDIV上
-        panel: document.getElementById("infoDiv"),
-        //设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
-        autoExtend: true,
-        //检索成功的回调函数
-        complete: function (results) {
-          //设置回调函数参数
-          var pois = results.detail.pois;
-          for (var i = 0, l = pois.length; i < l; i++) {
-            var poi = pois[i];
-            //扩展边界范围，用来包含搜索到的Poi点
-            latlngBounds.extend(poi.latLng);
-            var marker = new qq.maps.Marker({
-              map: map,
-              position: poi.latLng,
-            });
-
-            marker.setTitle(i + 1);
-
-            markers.push(marker);
-          }
-          //调整地图视野
-          map.fitBounds(latlngBounds);
-        },
-        //若服务请求失败，则运行以下函数
-        error: function () {
-          that.$message.error("请输入正确地址！");
+      var circle = new TMap.MultiCircle({
+        map,
+        styles: {
+          // 设置圆形样式
+          circle: new TMap.CircleStyle({
+            color: "rgba(41,91,255,0.16)",
+            showBorder: true,
+            borderColor: "rgba(41,91,255,1)",
+            borderWidth: 1
+          })
         },
+        geometries
       });
     },
     getData() {
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         fetch("https://talk.cirray.cn/api/shops")
-          .then(function (response) {
+          .then(function(response) {
             return response.json();
           })
-          .then(function (myJson) {
+          .then(function(myJson) {
             resolve(myJson);
           });
       });
-    },
-    searchKeyword() {
-      this.clearOverlays(markers);
-      //根据输入的关键字在搜索范围内检索
-      searchService.search(this.searchValue);
-    },
-    clearOverlays(overlays) {
-      var overlay;
-      while ((overlay = overlays.pop())) {
-        overlay.setMap(null);
-      }
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -196,7 +79,7 @@ export default {
 }
 #container {
   width: 100%;
-  height: 85vh;
+  height: 90vh;
 }
 .search-row {
   padding-bottom: 20px;
@@ -204,4 +87,4 @@ export default {
 .search-row button {
   margin: 0 10px;
 }
-</style>
+</style>