第一步啊

src/utils/dai-map.js

@@ -1,11 +1,227 @@
+// 封装了地图相关函数，兼容天地图、腾讯地图常用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;
+  this.markers = null;
+  this.getCenter = function () {
+    return {
+      lat: 0,
+      lng: 0,
+    };
+  };
+  this.setCenter = function (lat, lng) {};
+  this.setMarker = function (lat, lng) {};
+  this.getAddress = async function (lat, lng) {};
+  this.searchNearby = async function (keyword) {};
+  this.on = function (eventType, fn) {};
+
+  const QQMap = window.TMap;
+  const TDMap = window.T;
+
+  let { latitude, longitude } = position;
+  if (!latitude || latitude == "" || latitude == "0") {
+    latitude = 39.9088810666821;
+    longitude = 116.39743841556731;
+  }
+
+  if (mapType == "qq") {
+    let center = new QQMap.LatLng(latitude, longitude);
+    this.map = new QQMap.Map(ele, {
+      center,
+      ...params,
+    });
+
+    this.markers = new QQMap.MultiMarker({
+      map: map,
+      geometries: [],
+    });
+
+    this.getCenter = function () {
+      const center = this.map.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      return { lat, lng };
+    };
+
+    this.setCenter = function (lat, lng) {
+      this.map.setCenter(new QQMap.LatLng(lat, lng));
+    };
+
+    this.setMarker = function (lat, lng) {
+      this.markers.setGeometries([]);
+      this.markers.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new QQMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    };
+
+    this.geocoder = new QQMap.service.Geocoder(); // 新建一个正逆地址解析类
+    this.getAddress = async function (lat, lng) {
+      return new Promise((reslove) => {
+        this.geocoder
+          .getAddress({ location: new QQMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
+          .then((result) => {
+            reslove({
+              msg: "success",
+              data: {
+                address: result.result.address,
+              },
+            });
+          })
+          .catch((error) => {
+            reslove({
+              msg: "failed",
+              error,
+            });
+          });
+      });
+    };
+
+    this.search = new QQMap.service.Search(this.map, { pageSize: 10 });
+    this.searchNearby = async function (keyword) {
+      return new Promise((reslove) => {
+        this.search
+          .searchNearby({
+            keyword,
+            radius: 1000,
+            autoExtend: true,
+            center: this.map.getCenter(),
+          })
+          .then((result) => {
+            let { data } = result;
+            if (Array.isArray(data) && data.length > 0) {
+              const {
+                location: { lat, lng, address },
+              } = data[0];
+              // this.setCenter(lat, lng);
+              // this.setMarker(lat, lng);
+              reslove({
+                msg: "success",
+                data: {
+                  lng,
+                  lat,
+                  address,
+                },
+              });
+            } else {
+              reslove({
+                msg: "failed",
+                error: "未检索到相关位置坐标",
+              });
+            }
+          })
+          .catch((error) => {
+            reslove({
+              msg: "failed",
+              error,
+            });
+          });
+      });
+    };
+
+    this.on = function (eventType, fn) {
+      this.map.on(eventType, fn);
+    };
+  } else {
+    let center = new TDMap.LngLat(longitude, latitude);
+    this.map = new TDMap.Map(ele, {
+      center,
+      ...params,
+    });
+
+    this.getCenter = function () {
+      const center = this.map.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      return { lat, lng };
+    };
+
+    this.setCenter = function (lat, lng) {
+      this.map.panTo(new TDMap.LngLat(lng, lat));
+    };
+
+    this.setMarker = function (lat, lng) {
+      let lnglat = new TDMap.LngLat(lng, lat);
+      if (!this.marker) {
+        this.marker = new TDMap.Marker(lnglat, {});
+      } else {
+        this.marker.setLngLat(lnglat);
+      }
+    };
+
+    this.geocoder = new TDMap.service.Geocoder(); // 新建一个正逆地址解析类
+    this.getAddress = async function (lat, lng) {
+      return new Promise((reslove) => {
+        this.geocoder.getLocation(
+          { location: new TDMap.LatLng(lat, lng) },
+          (result) => {
+            if (result) {
+              let status = result.getStatus();
+              reslove({
+                msg: "success",
+                data: {
+                  address: result.getAddress(),
+                },
+              });
+            } else {
+              reslove({
+                msg: "failed",
+                error: "解析失败",
+              });
+            }
+          }
+        );
+      });
+    };
+
+    this.search = new TDMap.LocalSearch(this.map, { pageCapacity: 10 });
+    this.searchNearby = async function (keyword) {
+      return new Promise((reslove) => {
+        this.search.setQueryType(1);
+        this.search.searchNearby(keyword, this.map.getCenter(), 1000);
+
+        const result = this.search.getResults();
+        const data = result.getPois();
+
+        if (Array.isArray(data) && data.length > 0) {
+          const { lonlat, address, name } = data[0];
+          const lng = lonlat.split(",")[0];
+          const lat = lonlat.split(",")[1];
+          // this.setCenter(lat, lng);
+          // this.setMarker(lat, lng);
+          reslove({
+            msg: "success",
+            data: {
+              lng,
+              lat,
+              address: address + name,
+            },
+          });
+        } else {
+          reslove({
+            msg: "failed",
+            error: "未检索到相关位置坐标",
+          });
+        }
+      });
+    };
+
+    this.on = function (eventType, fn) {
+      if (eventType == "panend") {
+        this.map.on("dragend", fn);
+      } else {
+        this.map.on(eventType, fn);
+      }
+    };
 
-export default function init() {
-  this.mapType = typeof window.TMap!=='undefined' ? 'qq' : 'tiandi' 
-  window.TMap = T;
-  console.log("天地图", T);
-  window.TMap = {};
-  window.TMap.Map = function (ele, paramas) {
-    let tmap = new T.Map(ele, paramas);
     if (typeof ele == "string") {
       ele = document.getElementById("app");
     }
@@ -14,20 +230,7 @@ export default function init() {
     if (height == 0) {
       ele.style.height = width * 0.6 + "px";
     }
-    Object.keys(tmap).forEach((ki) => {
-      this[ki] = tmap[ki];
-    });
-    return this;
-  };
-  window.TMap.service = {
-    Search: T.LocalSearch,
-    Geocoder: T.Geocoder,
-  };
-  window.TMap.MultiMarker = function () {};
-  window.TMap.LatLng = function (lat, lng) {
-    return {
-      lat,
-      lng,
-    };
-  };
+  }
+
+  return this;
 }

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

@@ -331,12 +331,9 @@ import { requestPost } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
 import Schema from "async-validator";
 import Tinymce from "@c/tinymce2/index.vue";
+import daiMap from "@/utils/dai-map";
 
 var map;
-var search;
-var markers;
-var infoWindowList;
-var geocoder; // 新建一个正逆地址解析类
 
 export default {
   components: { Tinymce },
@@ -626,29 +623,16 @@ export default {
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
     initMap(item) {
       let { latitude, longitude } = this.$store.state.user;
-      if (!latitude || latitude == "" || latitude == "0") {
-        latitude = 39.9088810666821;
-        longitude = 116.39743841556731;
-      }
-      // 定义地图中心点坐标
-      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(map, { pageSize: 10 });
-      // 新建一个地点搜索类
-      markers = new TMap.MultiMarker({
-        map: map,
-        geometries: [],
-      });
-      infoWindowList = Array(10);
 
-      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+      let map = new daiMap(
+        document.getElementById("app"),
+        { latitude, longitude },
+        {
+          zoom: 16.2, // 设置地图缩放级别
+          pitch: 43.5, // 设置俯仰角
+          rotation: 45, // 设置地图旋转角度
+        }
+      );
 
       // 监听地图平移结束
       map.on("panend", (e) => {
@@ -657,70 +641,35 @@ export default {
       // this.handleMoveCenter(item);
     },
 
-    setMarker(lat, lng) {
-      markers.setGeometries([]);
-      markers.add([
-        {
-          id: "4",
-          styleId: "marker",
-          position: new TMap.LatLng(lat, lng),
-          properties: {
-            title: "marker4",
-          },
-        },
-      ]);
-    },
+    async handleSearchMap(item) {
+      const { msg, data } = await map.searchNearby(this.fmData[item.keyName]);
+      if (msg == "success") {
+        const { lat, lng } = data;
+        map.setCenter(lat, lng);
+        map.setMarker(lat, lng);
 
-    handleSearchMap(item) {
-      infoWindowList.forEach((infoWindow) => {
-        infoWindow.close();
-      });
-      infoWindowList.length = 0;
-      markers.setGeometries([]);
-      // 在地图显示范围内以给定的关键字搜索地点
-      search
-        .searchNearby({
-          keyword: this.fmData[item.keyName],
-          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);
-            // item.supValues[0] = lng;
-            // item.supValues[1] = lat;
-            this.fmData[item.supKeys[0]] = lng;
-            this.fmData[item.supKeys[1]] = lat;
-          } else {
-            this.$message.error("未检索到相关位置坐标");
-          }
-        });
+        this.fmData[item.supKeys[0]] = lng;
+        this.fmData[item.supKeys[1]] = lat;
+      } else {
+        this.$message.error("未检索到相关位置坐标");
+      }
     },
 
-    handleMoveCenter(item, e) {
+    async handleMoveCenter(item, e) {
       console.log(e);
       //修改地图中心点
-      const center = map.getCenter();
-      const lat = center.getLat();
-      const lng = center.getLng();
+      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;
-      this.setMarker(lat, lng);
+      map.setMarker(lat, lng);
 
       if (e && e.originalEvent) {
-        geocoder
-          .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
-          .then((result) => {
-            this.fmData[item.keyName] = result.result.address;
-          });
+        let { msg, data } = await map.getAddress(lat, lng);
+        if (msg == "success") {
+          this.fmData[item.keyName] = data.address;
+        }
       }
     },