社区自组织页面

src/utils/dai-map.js

@@ -1,8 +1,9 @@
 import nextTick from "dai-js/tools/nextTick";
 
+export const mapType = typeof window.TMap !== "undefined" ? "qq" : "td";
+
 // 封装了地图相关函数，兼容天地图、腾讯地图常用api
 export default function init(ele, position, params) {
-  const mapType = typeof window.TMap !== "undefined" ? "qq" : "td";
   this.mapType = mapType;
   this.map = null;
   this.marker = null;
@@ -14,7 +15,7 @@ export default function init(ele, position, params) {
     };
   };
   this.setCenter = function (lat, lng) {};
-  this.setMarker = function (lat, lng) {};
+  this.setMarker = function (lat, lng, title) {};
   this.getAddress = async function (lat, lng) {};
   this.searchNearby = async function (keyword) {};
   this.on = function (eventType, fn) {};
@@ -51,7 +52,7 @@ export default function init(ele, position, params) {
       this.map.setCenter(new QQMap.LatLng(lat, lng));
     };
 
-    this.setMarker = function (lat, lng) {
+    this.setMarker = function (lat, lng, title = "位置") {
       this.markers.setGeometries([]);
       this.markers.add([
         {
@@ -59,7 +60,7 @@ export default function init(ele, position, params) {
           styleId: "marker",
           position: new QQMap.LatLng(lat, lng),
           properties: {
-            title: "marker4",
+            title,
           },
         },
       ]);
@@ -103,8 +104,6 @@ export default function init(ele, position, params) {
               const {
                 location: { lat, lng, address },
               } = data[0];
-              this.setCenter(lat, lng);
-              this.setMarker(lat, lng);
               reslove({
                 msg: "success",
                 data: {
@@ -159,10 +158,12 @@ export default function init(ele, position, params) {
       this.map.panTo(new TDMap.LngLat(lng, lat));
     };
 
-    this.setMarker = function (lat, lng) {
+    this.setMarker = function (lat, lng, title = "位置") {
       let lnglat = new TDMap.LngLat(lng, lat);
       if (!this.marker) {
-        this.marker = new TDMap.Marker(lnglat, {});
+        this.marker = new TDMap.Marker(lnglat, {
+          title,
+        });
         this.map.addOverLay(this.marker);
       } else {
         this.marker.setLngLat(lnglat);

src/views/modules/communityService/dqfwzx/index.vue

@@ -162,12 +162,9 @@ import { mapGetters } from "vuex";
 import editForm from "./cpts/edit";
 import orderForm from "./cpts/order";
 import orderList from "./cpts/orderList";
+import daiMap from "@/utils/dai-map";
 
 var map;
-var search;
-var markers;
-var infoWindowList;
-let loading; // 加载动画
 
 export default {
   components: { editForm, orderForm, orderList },
@@ -207,49 +204,25 @@ export default {
   methods: {
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
     initMap() {
-      // 定义地图中心点坐标
+      let { latitude, longitude } = this.$store.state.user;
-      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
-      // 定义map变量，调用 TMap.Map() 构造函数创建地图
-      map = new window.TMap.Map(document.getElementById("centerIndexApp"), {
-        center: center, // 设置地图中心点坐标
-        zoom: 17.2, // 设置地图缩放级别
-        pitch: 43.5, // 设置俯仰角
-        rotation: 45, // 设置地图旋转角度
-      });
-
-      search = new window.TMap.service.Search({ pageSize: 10 });
-      // 新建一个地点搜索类
-      markers = new TMap.MultiMarker({
-        map: map,
-        geometries: [],
-      });
-      infoWindowList = Array(10);
-    },
 
-    setMarker(lat, lng, centerName) {
+      map = new daiMap(
-      markers.setGeometries([]);
+        document.getElementById("centerIndexApp"),
-      markers.add([
+        { latitude, longitude },
         {
-          id: "911",
+          zoom: 16.2, // 设置地图缩放级别
-          styleId: "marker",
+          pitch: 43.5, // 设置俯仰角
-          position: new TMap.LatLng(lat, lng),
+          rotation: 45, // 设置地图旋转角度
-          properties: {
+        }
-            title: centerName,
+      );
-          },
-        },
-      ]);
-    },
-
-    setCenter(lat, lng) {
-      map.setCenter(new window.TMap.LatLng(lat, lng));
     },
 
     setMap() {
       const { tableData, currentIndex } = this;
       let item = tableData[currentIndex];
       if (item) {
-        this.setCenter(item.latitude, item.longitude);
+        map.setCenter(item.latitude, item.longitude);
-        this.setMarker(item.latitude, item.longitude, item.centerName);
+        map.setMarker(item.latitude, item.longitude, item.centerName);
       }
     },
 

src/views/modules/communityService/sqzzz/cpts/edit.vue

@@ -251,6 +251,7 @@ import { Loading } from "element-ui"; // 引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import formVltHelper from "dai-js/tools/formVltHelper";
 import nextTick from "dai-js/tools/nextTick";
+import daiMap from "@/utils/dai-map";
 
 var map;
 var search;
@@ -390,100 +391,51 @@ export default {
       organizationPersonnel.splice(index, 1);
       this.dataForm.organizationPersonnel = organizationPersonnel;
     },
+
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
     initMap() {
       let { latitude, longitude } = this.$store.state.user;
-      if (!latitude || latitude == "" || latitude == "0") {
+
-        latitude = 39.9088810666821;
+      map = new daiMap(
-        longitude = 116.39743841556731;
+        document.getElementById("app"),
-      }
+        { latitude, longitude },
-      // 定义地图中心点坐标
+        {
-      var center = new window.TMap.LatLng(latitude, longitude);
-      // 定义map变量，调用 TMap.Map() 构造函数创建地图
-      map = new window.TMap.Map(document.getElementById("app"), {
-        center: center, // 设置地图中心点坐标
           zoom: 16.2, // 设置地图缩放级别
           pitch: 43.5, // 设置俯仰角
           rotation: 45, // 设置地图旋转角度
-      });
+        }
-
+      );
-      search = new window.TMap.service.Search({ pageSize: 10 });
-      // 新建一个地点搜索类
-      markers = new TMap.MultiMarker({
-        map: map,
-        geometries: [],
-      });
-      infoWindowList = Array(10);
-
-      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
 
       // 监听地图平移结束
-      map.on("panend", (e) => {
+      map.on("moveend", (e) => {
         this.handleMoveCenter(e);
       });
-      // this.handleMoveCenter();
     },
 
-    setMarker(lat, lng) {
+    async handleSearchMap() {
-      markers.setGeometries([]);
+      const { msg, data } = await map.searchNearby(this.dataForm.address);
-      markers.add([
+      if (msg == "success") {
-        {
+        const { lat, lng } = data;
-          id: "4",
+        map.setCenter(lat, lng);
-          styleId: "marker",
+        map.setMarker(lat, lng);
-          position: new TMap.LatLng(lat, lng),
-          properties: {
-            title: "marker4",
-          },
-        },
-      ]);
-    },
-
-    handleSearchMap() {
-      infoWindowList.forEach((infoWindow) => {
-        infoWindow.close();
-      });
-      infoWindowList.length = 0;
-      markers.setGeometries([]);
-      // 在地图显示范围内以给定的关键字搜索地点
-      search
-        .searchNearby({
-          keyword: this.dataForm.address,
-          radius: 1000,
-          autoExtend: true,
-          center: map.getCenter(),
-        })
-        .then((result) => {
-          let { data } = result;
-          if (Array.isArray(data) && data.length > 0) {
-            const {
-              location: { lat, lng },
-            } = data[0];
-            map.setCenter(new TMap.LatLng(lat, lng));
-            this.setMarker(lat, lng);
         this.dataForm.latitude = lat;
         this.dataForm.longitude = lng;
       } else {
         this.$message.error("未检索到相关位置坐标");
       }
-        });
     },
 
-    handleMoveCenter(e) {
+    async handleMoveCenter(e) {
-      console.log(e);
+      console.log("handleMoveCenter", e);
       //修改地图中心点
-      const center = map.getCenter();
+      const { lat, lng } = map.getCenter();
-      const lat = center.getLat();
-      const lng = center.getLng();
       this.dataForm.latitude = lat;
       this.dataForm.longitude = lng;
-      this.setMarker(lat, lng);
+      map.setMarker(lat, lng);
 
-      if (e && e.originalEvent) {
+      let { msg, data } = await map.getAddress(lat, lng);
-        geocoder
+      if (msg == "success") {
-          .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
+        this.dataForm.address = data.address;
-          .then((result) => {
-            this.dataForm.address = result.result.address;
-          });
       }
     },
 
@@ -498,7 +450,7 @@ export default {
 
         await nextTick(800);
         if (map) {
-          map.setCenter(new TMap.LatLng(row.latitude, row.longitude));
+          map.setCenter(row.latitude, row.longitude);
         }
       }
     },

src/views/modules/cpts/base/cpts/edit.vue

@@ -645,9 +645,8 @@ export default {
       const { msg, data } = await map.searchNearby(this.fmData[item.keyName]);
       if (msg == "success") {
         const { lat, lng } = data;
-        // map.setCenter(lat, lng);
+        map.setCenter(lat, lng);
-        // map.setMarker(lat, lng);
+        map.setMarker(lat, lng);
-
         this.fmData[item.supKeys[0]] = lng;
         this.fmData[item.supKeys[1]] = lat;
       } else {
@@ -659,8 +658,7 @@ export default {
       console.log("handleMoveCenter", e);
       //修改地图中心点
       const { lat, lng } = map.getCenter();
-      // item.supValues[0] = lng;
+
-      // item.supValues[1] = lat;
       this.fmData[item.supKeys[0]] = lng;
       this.fmData[item.supKeys[1]] = lat;
       map.setMarker(lat, lng);