优化地图poi选择

src/utils/commonVant.js

@@ -1,3 +1,4 @@
+import { Toast } from "vant";
 /**
  *
  * @param {*number} duration //展示时长(ms)，值为 0 时，toast 不会消失
@@ -6,7 +7,7 @@
  * @returns
  */
 export function toastLoading(duration = 0, message = "加载中...", forbidClick = true) {
-  return this.$toast.loading({
+  return Toast.loading({
     duration: duration,
     message: message,
     forbidClick: forbidClick,

src/utils/getPosition.js

@@ -0,0 +1,124 @@
+import { getTicket } from "@/api/index";
+import { toastLoading } from "@/utils/commonVant";
+import { CJ02BD, gcj02BD } from "@/utils/index";
+import { jsonp } from "vue-jsonp";
+// 腾讯位置服务 key
+const TxMapKey = "WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6";
+
+// 获取当前定位
+export function getPosition() {
+  return new Promise((resolve, reject) => {
+    toastLoading(0, "定位中...", true);
+    // 本地开发 test 环境时 时跳过获取定位功能 模拟定位
+    if (process.env.NODE_ENV === "test") {
+      let resData = {
+        latitude: 34.615684509277344,
+        longitude: 112.4474105834961,
+      };
+      localStorage.setItem("lat", resData.lat);
+      localStorage.setItem("lon", resData.lon);
+      // 定位坐标转换 腾讯转百度
+      let TXisBD = CJ02BD(resData.latitude, resData.longitude);
+      toastLoading().clear();
+      resolve({ TXisBD, resData });
+    } else {
+      let url = window.location.href;
+      //  获取签名
+      getTicket({ url: url }).then((res) => {
+        console.log("url=" + url);
+        // toastLoading().clear();
+        if (res.status == 200) {
+          let qiyeData = res.data.data;
+          wx.config({
+            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
+            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+            appId: qiyeData.appId, // 必填，企业微信的corpID
+            timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
+            nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
+            signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
+            jsApiList: ["ready", "getLocation"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
+          });
+          wx.ready(() => {
+            wx.getLocation({
+              type: "gcj02",
+              success: (res) => {
+                toastLoading().clear();
+                console.log("处理前");
+                console.log(res.latitude, res.longitude);
+                // 定位坐标转换 腾讯转百度
+                let TXisBD = CJ02BD(res.latitude, res.longitude);
+                console.log("处理后");
+                console.log(TXisBD);
+                localStorage.setItem("lat", TXisBD.lat);
+                localStorage.setItem("lon", TXisBD.lon);
+                resolve({ TXisBD, res });
+              },
+              fail: () => {
+                toastLoading().clear();
+                reject("GPS未开启");
+              },
+            });
+          });
+          wx.error((res) => {
+            toastLoading().clear();
+            reject("定位失败，请开启企微定位权限");
+          });
+        }
+      });
+    }
+  });
+}
+
+/**
+ * 地点搜索 获取500米范围poi点
+ * @param {*object} location //当前位置
+ * @param {*number} radius //搜索半径
+ * @param {*number} auto_extend //是否自动扩大范围 0 不扩大
+ * @returns
+ */
+export function getMapPoi(location, radius = 500, auto_extend = 0) {
+  return new Promise((resolve, reject) => {
+    let api =
+      "https://apis.map.qq.com/ws/place/v1/search?page_size=10&page_index=1&orderby=_distance&output=jsonp";
+    let boundary = `&boundary=nearby(${location.latitude},${location.longitude},${radius},${auto_extend})`;
+    let key = `&key=${TxMapKey}`;
+    jsonp(api + boundary + key)
+      .then((res) => {
+        console.log(res);
+        resolve(res);
+      })
+      .catch((err) => {
+        console.log(err);
+        reject(err);
+      });
+  });
+}
+
+/**
+ * 关键词搜索 在当前城市范围内搜索
+ * @param {*object} location //当前位置
+ * @param {*string} keywordValue //关键字
+ * @param {*number} radius //搜索半径
+ * @param {*number} auto_extend //是否自动扩大范围 0 不扩大
+ * @returns
+ */
+export function getkeywordPoi(location, keywordValue) {
+  return new Promise((resolve, reject) => {
+    let keyword = keywordValue ? "&keyword=" + encodeURI(keywordValue) : "";
+    // 关键词搜索
+    let api =
+      "https://apis.map.qq.com/ws/place/v1/suggestion?output=jsonp&page_size=10&region_fix=1";
+    let key = `&key=${TxMapKey}`;
+    let locationPos = `&location=${location.latitude},${location.longitude}`;
+    jsonp(api + locationPos + keyword + key)
+      .then((res) => {
+        console.log(keyword);
+        console.log(res);
+        resolve(res);
+      })
+      .catch((err) => {
+        console.log(err);
+        reject(err);
+      });
+  });
+}

src/views/storeManagement/newTMap.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="newTMap">
+    <div id="allmap1" style="height: 100%; width: 100%"></div>
+    <div
+      style="position: fixed; z-index: 99999; top: 0; width: 100%; background-color: white"
+      v-if="showmap">
+      <form action="/">
+        <van-search
+          v-model="searchValue"
+          left-icon="search"
+          @input="searchFn"
+          placeholder="请输入搜索关键词">
+        </van-search>
+      </form>
+      <div style="height: 200px; overflow: hidden" v-if="searchSHow">
+        <div style="height: 100px; min-height: 200px; overflow-y: scroll; padding: 12px">
+          <div
+            v-for="(itme, index) in mapsearchlist"
+            :key="index"
+            style="border-bottom: 1px solid #eee"
+            @click="addressFn(itme)">
+            <p>{{ itme.title }}</p>
+            <p>{{ itme.address }}</p>
+            <p>距离：{{ itme._distance }}米</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mapaddress" v-if="showmap">
+      <div class="title">
+        <span @click="showmap = false" style="float: left"
+          ><van-icon name="cross" size="16"
+        /></span>
+        <p class="titleText">附近地址信息</p>
+        <span style="float: right" @click="confirmMap">确定</span>
+      </div>
+      <div class="listBox">
+        <van-radio-group v-model="addresssb" @change="mapselect" v-if="shows">
+          <van-radio :name="index" v-for="(item, index) in maplist" :key="index"
+            ><p style="margin: 4px 0; font-weight: bold">
+              {{ item.title }}
+            </p>
+            <p style="margin: 4px 0">{{ item.address }}</p>
+            <p style="margin: 4px 0">距离：{{ item._distance }}米</p>
+          </van-radio>
+        </van-radio-group>
+        <br />
+        <br />
+        <br />
+        <br />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getMapPoi, getkeywordPoi } from "@/utils/getPosition";
+
+export default {
+  data() {
+    return {
+      searchValue: "",
+      searchSHow: false,
+      mapsearchlist: [],
+      showmap: false,
+      addresssb: "",
+      shows: true,
+      maplist: [],
+    };
+  },
+  methods: {
+    initMap(mapPointlist) {
+      //创建map对象，初始化地图
+      let latlng = {
+        lat: this.pLat,
+        lon: this.pLot,
+      };
+      /* eslint-disable */
+      let center = new TMap.LatLng(latlng.lat, latlng.lon);
+      this.map = new TMap.Map("allmap1", {
+        center: center, //设置地图中心点坐标
+        zoom: 17, //设置地图缩放级别
+        // viewMode: "3D",
+        // pitch: 43.5, //设置俯仰角
+        // rotation: 45, //设置地图旋转角度
+      });
+      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); //移除比例尺控件
+      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); //移除旋转控件
+      this.map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); //移除控件缩放
+      /* eslint-enable */
+      // 添加标记点 初始化中心点
+      this.initPointMultiMarker(this.map, center);
+      // 添加搜索出的poi点
+      this.addMarkerLayer(this.map, mapPointlist);
+      this.map.on("click", this.clickMap);
+    },
+    initPointMultiMarker(mapNode, center) {
+      let initPoint = {
+        id: "marker",
+        styleId: "marker",
+        position: center,
+      };
+      /* eslint-disable */
+      new TMap.MultiMarker({
+        id: "pointId",
+        map: mapNode,
+        geometries: [initPoint],
+        styles: {
+          marker: new TMap.MarkerStyle({
+            width: 32,
+            height: 40,
+            anchor: { x: 16, y: 32 },
+            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png",
+          }),
+        },
+      });
+      /* eslint-enable */
+    },
+    addMarkerLayer(mapNode, mapPointlist) {
+      /* eslint-disable */
+      let len = mapPointlist.length;
+      if (!len) return;
+      let markerLayerArr = [];
+      for (let i = 0; i < len; i++) {
+        markerLayerArr.push({
+          id: mapPointlist[i].id,
+          styleId: "marker",
+          position: new TMap.LatLng(mapPointlist[i].location.lat, mapPointlist[i].location.lng),
+        });
+      }
+      new TMap.MultiMarker({
+        id: "otherPointId",
+        map: mapNode,
+        geometries: markerLayerArr,
+        styles: {
+          marker: new TMap.MarkerStyle({
+            width: 32,
+            height: 40,
+            anchor: { x: 16, y: 32 },
+            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png",
+          }),
+        },
+      });
+      // markerLayer.add(markerLayerArr);
+      /* eslint-enable */
+    },
+    // 点击事件处理方法
+    clickMap(evt) {
+      var lat = evt.latLng.getLat().toFixed(6);
+      var lng = evt.latLng.getLng().toFixed(6);
+      console.log("您点击的的坐标是：" + lat + "," + lng);
+    },
+    mapBindEvent(map) {
+      // 监听地图平移开始
+      map.on("pan", () => {
+        console.log("监听地图平移开始");
+      });
+      // 监听地图平移结束
+      map.on("panend", () => {
+        console.log("监听地图平移结束");
+      });
+    },
+    searchFn() {
+      this.searchSHow = false;
+      console.log(this.searchValue);
+      getkeywordPoi({ latitude: this.pLat, longitude: this.pLot }, this.searchValue).then((res) => {
+        // 不显示下拉选择
+        if (!res.data.length && !this.searchValue) {
+          this.searchSHow = false;
+        } else {
+          this.searchSHow = true;
+        }
+        // 联想下拉选
+        this.mapsearchlist = res.data;
+        // // 赋值底部列表数据
+        // this.maplist = res.data;
+      });
+    },
+    addressFn(val) {
+      var that = this;
+      setTimeout(() => {
+        /* eslint-disable */
+        that.searchSHow = false;
+        that.map.setCenter(new TMap.LatLng(val.location.lat, val.location.lng));
+        that.markers1.updateGeometries([
+          {
+            id: "marker",
+            styleId: "marker",
+            position: new TMap.LatLng(val.location.lat, val.location.lng),
+          },
+        ]);
+        that.maplist = [];
+        // 地点搜索 获取500米范围poi点
+        getMapPoi({ latitude: this.pLat, longitude: this.pLot }).then((res) => {
+          console.log(res);
+          that.maplist = res.data;
+          that.marker.setGeometries([]);
+          setTimeout(() => {
+            for (let p = 0; p < res.data.length; p++) {
+              that.marker.updateGeometries([
+                {
+                  id: res.data[p].id,
+                  position: new TMap.LatLng(res.data[p].location.lat, res.data[p].location.lng),
+                },
+              ]);
+            }
+          });
+        });
+        // 清楚选中状态
+        that.addresssb = -1;
+        /* eslint-enable */
+      });
+    },
+    confirmMap() {
+      console.log(this.maplist);
+      console.log(this.addresssb);
+      if (this.addresssb > -1) {
+        this.list.addressLine = this.maplist[this.addresssb].address;
+        this.lon = this.myLat;
+        this.lat = this.myLon;
+        this.poiAddress = this.maplist[this.addresssb].address;
+        this.poiLat = this.maplist[this.addresssb].location.lat;
+        this.poiLon = this.maplist[this.addresssb].location.lng;
+        this.poiId = this.maplist[this.addresssb].id;
+        this.poiName = this.maplist[this.addresssb].title;
+        this.showmap = false;
+      }
+    },
+    mapselect(val) {
+      /* eslint-disable */
+      this.searchSHow = false;
+      if (val > -1) {
+        this.markers.updateGeometries([
+          {
+            id: "markers1",
+            styleId: "abc",
+            position: new TMap.LatLng(
+              this.maplist[val].location.lat,
+              this.maplist[val].location.lng
+            ),
+          },
+        ]);
+      }
+      /* eslint-enable */
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/storeManagement/storeDetail.vue

@@ -330,6 +330,7 @@
                 @click="addressFn(itme)">
                 <p>{{ itme.title }}</p>
                 <p>{{ itme.address }}</p>
+                <p>距离：{{ itme._distance }}米</p>
               </div>
             </div>
           </div>
@@ -348,8 +349,9 @@
                 ><p style="margin: 4px 0; font-weight: bold">
                   {{ item.title }}
                 </p>
-                <p style="margin: 4px 0">{{ item.address }}</p></van-radio
-              >
+                <p style="margin: 4px 0">{{ item.address }}</p>
+                <p style="margin: 4px 0">距离：{{ item._distance }}米</p>
+              </van-radio>
             </van-radio-group>
             <br />
             <br />
@@ -391,10 +393,10 @@ import txmapimg1 from "@/assets/txmap1.svg";
 import txmapimg2 from "@/assets/txmap2.svg";
 import txmapimg3 from "@/assets/marker_blue.png";
 import axios from "axios";
-import { jsonp } from "vue-jsonp";
 import { updateStoreAddress, valid } from "@/api/visitstore";
 import uploadImg from "@/components/viewaddreddUploadImg.vue";
 import helpPage from "./helpPage.vue";
+import { getPosition, getMapPoi, getkeywordPoi } from "@/utils/getPosition";
 export default {
   components: { uploadImg, mapmarker, viewUploadImg, helpPage },
   data() {
@@ -521,13 +523,8 @@ export default {
           },
         ]);
         that.maplist = [];
-        jsonp(
-          "https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" +
-            val.location.lat +
-            "," +
-            val.location.lng +
-            ",500,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6"
-        ).then((res) => {
+        // 地点搜索 获取500米范围poi点
+        getMapPoi({ latitude: this.pLat, longitude: this.pLot }).then((res) => {
           console.log(res);
           that.maplist = res.data;
           that.marker.setGeometries([]);
@@ -542,34 +539,37 @@ export default {
             }
           });
         });
+        // 清楚选中状态
         that.addresssb = -1;
+        // jsonp(
+        //   "https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" +
+        //     val.location.lat +
+        //     "," +
+        //     val.location.lng +
+        //     ",500,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6"
+        // ).then((res) => {
+        //   console.log(res);
+        //   that.maplist = res.data;
+        //   that.marker.setGeometries([]);
+        //   setTimeout(() => {
+        //     for (let p = 0; p < res.data.length; p++) {
+        //       that.marker.updateGeometries([
+        //         {
+        //           id: res.data[p].id,
+        //           position: new TMap.LatLng(res.data[p].location.lat, res.data[p].location.lng),
+        //         },
+        //       ]);
+        //     }
+        //   });
+        // });
       });
     },
     searchFn() {
       this.searchSHow = false;
       console.log(this.searchValue);
-      // 关键词
-      let keyword = this.searchValue ? "&keyword=" + encodeURI(this.searchValue) : "";
-      // 地点搜索
-      let searchApi =
-        "https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" +
-        this.pLat +
-        "," +
-        this.pLot +
-        ",500,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6";
-      // 关键词搜索
-      let suggestionApi =
-        "https://apis.map.qq.com/ws/place/v1/suggestion?location=" +
-        this.pLat +
-        "," +
-        this.pLot +
-        "&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6&page_size=10&region_fix=1";
-      jsonp(suggestionApi + keyword).then((res) => {
-        console.log(searchApi + keyword);
-        console.log(suggestionApi + keyword);
-        console.log(res);
+      getkeywordPoi({ latitude: this.pLat, longitude: this.pLot }, this.searchValue).then((res) => {
         // 不显示下拉选择
-        if (!res.data.length && !this.search) {
+        if (!res.data.length && !this.searchValue) {
           this.searchSHow = false;
         } else {
           this.searchSHow = true;
@@ -600,8 +600,6 @@ export default {
       console.log(this.addresssb);
       if (this.addresssb > -1) {
         this.list.addressLine = this.maplist[this.addresssb].address;
-        // this.lat=this.maplist[this.addresssb].location.lat
-        // this.lon=this.maplist[this.addresssb].location.lng
         this.lon = this.myLat;
         this.lat = this.myLon;
         this.poiAddress = this.maplist[this.addresssb].address;
@@ -609,104 +607,129 @@ export default {
         this.poiLon = this.maplist[this.addresssb].location.lng;
         this.poiId = this.maplist[this.addresssb].id;
         this.poiName = this.maplist[this.addresssb].title;
+        this.showmap = false;
       }
-      this.showmap = false;
     },
     fns() {
       this.searchValue = "";
-      let loading1 = this.$toast.loading({
-        duration: 0,
-        message: "定位中...",
-        forbidClick: true,
-      });
-      let url = window.location.href;
-      // let url = encodeURIComponent("https://ssbsfatest.nipponpaint.com.cn/mobile" + window.location.href.split("/mobile")[1]).replaceAll("%3A", ":")
-      let that = this;
-      let qiyeData;
-      const instance = axios.create();
-      instance.defaults.headers.common["userId"] = localStorage.getItem("loginName");
-      instance
-        .get(process.env.VUE_APP_BASE_API + "mobile/wx/ticket", {
-          params: {
-            url: url,
-          },
-        })
-        .then((response) => {
-          if (response.status == 200) {
-            this.cont = 6;
-            var flat = true;
-            var times = setInterval(() => {
-              this.cont--;
-              if (this.cont == "0") {
-                if (flat) {
-                  loading1.clear();
-                  clearInterval(times);
-                  that.$dialog.alert({
-                    message: "定位失败，请开启企微定位权限",
-                  });
-                } else {
-                  clearInterval(times);
-                }
-              }
-            }, 1000);
-            qiyeData = response.data.data;
-            that.wx.config({
-              beta: true,
-              debug: false,
-              appId: qiyeData.appId,
-              timestamp: qiyeData.timestamp,
-              nonceStr: qiyeData.nonceStr,
-              signature: qiyeData.signature,
-              jsApiList: ["ready", "getLocation"],
-            });
-            that.wx.ready(function () {
-              that.wx.getLocation({
-                type: "gcj02",
-                success: function (res) {
-                  flat = false;
-                  loading1.clear();
-                  var location = that.CJ02BD(res.latitude, res.longitude);
-                  that.lat = location.lat;
-                  that.lon = location.lon;
-                  if (that.list.lon == "") {
-                    that.list.lon = location.lon;
-                    that.list.lat = res.latitude;
-                  }
-                  that.pLat = res.latitude;
-                  that.pLot = res.longitude;
-                  that.myLat = location.lat;
-                  that.myLon = location.lon;
-                  that.showmap = true;
-                  jsonp(
-                    "https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" +
-                      res.latitude +
-                      "," +
-                      res.longitude +
-                      ",500,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6"
-                  ).then((res) => {
-                    console.log(res);
-                    that.maplist = res.data;
-                    setTimeout(() => {
-                      that.addVisits1("1");
-                    });
-                  });
-                },
-                fail: function () {
-                  loading1.clear();
-                  that.$dialog.alert({
-                    title: "系统提示",
-                    message: "GPS未开启",
-                  });
-                },
-              });
-            });
-            that.wx.error(function (res) {
-              this.$toast.fail("定位失败");
-            });
-          } else {
-            this.$toast.fail("接口异常");
+      getPosition()
+        .then((res) => {
+          let { TXisBD, resData } = res;
+          this.lat = TXisBD.lat;
+          this.lon = TXisBD.lon;
+          if (this.list.lon == "") {
+            this.list.lon = TXisBD.lon;
+            this.list.lat = resData.latitude;
           }
+          this.pLat = resData.latitude;
+          this.pLot = resData.longitude;
+          this.myLat = TXisBD.lat;
+          this.myLon = TXisBD.lon;
+          this.showmap = true;
+          // 地点搜索 获取500米范围poi点
+          getMapPoi(resData).then((resPoi) => {
+            this.maplist = resPoi.data;
+            setTimeout(() => {
+              this.addVisits1("1");
+            });
+          });
+        })
+        .catch((err) => {
+          console.log(err);
         });
+      // let loading1 = this.$toast.loading({
+      //   duration: 0,
+      //   message: "定位中...",
+      //   forbidClick: true,
+      // });
+      // let url = window.location.href;
+      // // let url = encodeURIComponent("https://ssbsfatest.nipponpaint.com.cn/mobile" + window.location.href.split("/mobile")[1]).replaceAll("%3A", ":")
+      // let that = this;
+      // let qiyeData;
+      // const instance = axios.create();
+      // instance.defaults.headers.common["userId"] = localStorage.getItem("loginName");
+      // instance
+      //   .get(process.env.VUE_APP_BASE_API + "mobile/wx/ticket", {
+      //     params: {
+      //       url: url,
+      //     },
+      //   })
+      //   .then((response) => {
+      //     if (response.status == 200) {
+      //       this.cont = 6;
+      //       var flat = true;
+      //       var times = setInterval(() => {
+      //         this.cont--;
+      //         if (this.cont == "0") {
+      //           if (flat) {
+      //             loading1.clear();
+      //             clearInterval(times);
+      //             that.$dialog.alert({
+      //               message: "定位失败，请开启企微定位权限",
+      //             });
+      //           } else {
+      //             clearInterval(times);
+      //           }
+      //         }
+      //       }, 1000);
+      //       qiyeData = response.data.data;
+      //       that.wx.config({
+      //         beta: true,
+      //         debug: false,
+      //         appId: qiyeData.appId,
+      //         timestamp: qiyeData.timestamp,
+      //         nonceStr: qiyeData.nonceStr,
+      //         signature: qiyeData.signature,
+      //         jsApiList: ["ready", "getLocation"],
+      //       });
+      //       that.wx.ready(function () {
+      //         that.wx.getLocation({
+      //           type: "gcj02",
+      //           success: function (res) {
+      //             flat = false;
+      //             loading1.clear();
+      //             var location = that.CJ02BD(res.latitude, res.longitude);
+      //             that.lat = location.lat;
+      //             that.lon = location.lon;
+      //             if (that.list.lon == "") {
+      //               that.list.lon = location.lon;
+      //               that.list.lat = res.latitude;
+      //             }
+      //             that.pLat = res.latitude;
+      //             that.pLot = res.longitude;
+      //             that.myLat = location.lat;
+      //             that.myLon = location.lon;
+      //             that.showmap = true;
+      //             jsonp(
+      //               "https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(" +
+      //                 res.latitude +
+      //                 "," +
+      //                 res.longitude +
+      //                 ",500,0)&page_size=10&page_index=1&orderby=_distance&output=jsonp&key=WLCBZ-HRM6L-YOMPV-ME62B-AQOG6-JUBW6"
+      //             ).then((res) => {
+      //               console.log(res);
+      //               that.maplist = res.data;
+      //               setTimeout(() => {
+      //                 that.addVisits1("1");
+      //               });
+      //             });
+      //           },
+      //           fail: function () {
+      //             loading1.clear();
+      //             that.$dialog.alert({
+      //               title: "系统提示",
+      //               message: "GPS未开启",
+      //             });
+      //           },
+      //         });
+      //       });
+      //       that.wx.error(function (res) {
+      //         this.$toast.fail("定位失败");
+      //       });
+      //     } else {
+      //       this.$toast.fail("接口异常");
+      //     }
+      //   });
     },
     addVisits1(val) {
       var that = this;
@@ -781,9 +804,19 @@ export default {
       this.markers = markers1;
       this.markers1 = markers;
       this.marker = marker;
-      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
-      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
-      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
+      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE); //移除比例尺控件
+      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION); //移除旋转控件
+      map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM); //移除控件缩放
+    },
+    initMap(map) {
+      // 监听地图平移开始
+      map.on("pan", () => {
+        console.log("监听地图平移开始");
+      });
+      // 监听地图平移结束
+      map.on("panend", () => {
+        console.log("监听地图平移结束");
+      });
     },
     updateStoreAddress() {
       if (this.list.province == "") {
@@ -1273,85 +1306,98 @@ export default {
             this.address = "地址";
           }
 
-          let loading1 = this.$toast.loading({
-            duration: 0,
-            message: "定位中...",
-            forbidClick: true,
-          });
-          let url = window.location.href;
-          // let url = "https://ssbsfatest.nipponpaint.com.cn/mobile" + window.location.href.split("/mobile")[1]
-          let that = this;
-          let qiyeData;
-          const instance = axios.create();
-          instance.defaults.headers.common["userId"] = localStorage.getItem("loginName");
-          instance
-            .get(process.env.VUE_APP_BASE_API + "mobile/wx/ticket", {
-              params: {
-                url: url,
-              },
+          getPosition()
+            .then((res) => {
+              let { TXisBD, resData } = res;
+              this.lat = TXisBD.lat;
+              this.lon = TXisBD.lon;
+              this.myLat = TXisBD.lat;
+              this.myLon = TXisBD.lon;
+              this.list.lon = TXisBD.lon;
+              this.list.lat = TXisBD.lat;
             })
-            .then((response) => {
-              if (response.status == 200) {
-                this.cont = 6;
-                var flat = true;
-                var times = setInterval(() => {
-                  this.cont--;
-                  if (this.cont == "0") {
-                    if (flat) {
-                      loading1.clear();
-                      clearInterval(times);
-                      that.$dialog
-                        .alert({
-                          message: "定位失败，请开启企微定位权限",
-                        })
-                        .then(() => {
-                          this.$router.go(-1);
-                        });
-                    } else {
-                      clearInterval(times);
-                    }
-                  }
-                }, 1000);
-                qiyeData = response.data.data;
-                that.wx.config({
-                  beta: true,
-                  debug: false,
-                  appId: qiyeData.appId,
-                  timestamp: qiyeData.timestamp,
-                  nonceStr: qiyeData.nonceStr,
-                  signature: qiyeData.signature,
-                  jsApiList: ["ready", "getLocation"],
-                });
-                that.wx.ready(function () {
-                  that.wx.getLocation({
-                    type: "gcj02",
-                    success: function (res) {
-                      flat = false;
-                      loading1.clear();
-                      var location = that.CJ02BD(res.latitude, res.longitude);
-                      that.lat = location.lat;
-                      that.lon = location.lon;
-                      that.myLat = location.lat;
-                      that.myLon = location.lon;
-                      that.list.lon = location.lon;
-                      that.list.lat = location.lat;
-                    },
-                    fail: function () {
-                      loading1.clear();
-                      that.$dialog.alert({
-                        title: "系统提示",
-                        message: "GPS未开启",
-                      });
-                    },
-                  });
-                });
-                that.wx.error(function (res) {
-                  this.$toast.fail("定位失败");
-                });
-              } else {
-                this.$toast.fail("接口异常");
-              }
+            .catch((err) => {
+              console.log(err);
             });
+          // let loading1 = this.$toast.loading({
+          //   duration: 0,
+          //   message: "定位中...",
+          //   forbidClick: true,
+          // });
+          // let url = window.location.href;
+          // // let url = "https://ssbsfatest.nipponpaint.com.cn/mobile" + window.location.href.split("/mobile")[1]
+          // let that = this;
+          // let qiyeData;
+          // const instance = axios.create();
+          // instance.defaults.headers.common["userId"] = localStorage.getItem("loginName");
+          // instance
+          //   .get(process.env.VUE_APP_BASE_API + "mobile/wx/ticket", {
+          //     params: {
+          //       url: url,
+          //     },
+          //   })
+          //   .then((response) => {
+          //     if (response.status == 200) {
+          //       this.cont = 6;
+          //       var flat = true;
+          //       var times = setInterval(() => {
+          //         this.cont--;
+          //         if (this.cont == "0") {
+          //           if (flat) {
+          //             loading1.clear();
+          //             clearInterval(times);
+          //             that.$dialog
+          //               .alert({
+          //                 message: "定位失败，请开启企微定位权限",
+          //               })
+          //               .then(() => {
+          //                 this.$router.go(-1);
+          //               });
+          //           } else {
+          //             clearInterval(times);
+          //           }
+          //         }
+          //       }, 1000);
+          //       qiyeData = response.data.data;
+          //       that.wx.config({
+          //         beta: true,
+          //         debug: false,
+          //         appId: qiyeData.appId,
+          //         timestamp: qiyeData.timestamp,
+          //         nonceStr: qiyeData.nonceStr,
+          //         signature: qiyeData.signature,
+          //         jsApiList: ["ready", "getLocation"],
+          //       });
+          //       that.wx.ready(function () {
+          //         that.wx.getLocation({
+          //           type: "gcj02",
+          //           success: function (res) {
+          //             flat = false;
+          //             loading1.clear();
+          //             var location = that.CJ02BD(res.latitude, res.longitude);
+          //             that.lat = location.lat;
+          //             that.lon = location.lon;
+          //             that.myLat = location.lat;
+          //             that.myLon = location.lon;
+          //             that.list.lon = location.lon;
+          //             that.list.lat = location.lat;
+          //           },
+          //           fail: function () {
+          //             loading1.clear();
+          //             that.$dialog.alert({
+          //               title: "系统提示",
+          //               message: "GPS未开启",
+          //             });
+          //           },
+          //         });
+          //       });
+          //       that.wx.error(function (res) {
+          //         this.$toast.fail("定位失败");
+          //       });
+          //     } else {
+          //       this.$toast.fail("接口异常");
+          //     }
+          //   });
         } else {
           this.$toast.fail(res.msg);
         }

vue.config.js

@@ -1,15 +1,15 @@
-'use strict'
-const path = require('path')
+"use strict";
+const path = require("path");
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
-const name = process.env.VUE_APP_TITLE || '门店拜访' // 网页标题
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const name = process.env.VUE_APP_TITLE || "门店拜访"; // 网页标题
+const port = 8888; // 端口
 module.exports = {
   // publicPath: process.env.NODE_ENV === "production" ? "/mobile/" : "/",
   publicPath: "/mobile/",
-  outputDir: 'mobile',
-  assetsDir: 'static',
+  outputDir: "mobile",
+  assetsDir: "static",
   lintOnSave: false,
   productionSourceMap: false,
   devServer: {
@@ -20,31 +20,29 @@ module.exports = {
         target: process.env.VUE_APP_Target,
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]:process.env.VUE_APP_BASE_API+''
-        }
+          ["^" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API + "",
+        },
       },
     },
-    disableHostCheck: true
+    disableHostCheck: true,
   },
   configureWebpack: {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src')
-      }
-    }
+        "@": resolve("src"),
+      },
+    },
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
-    config.when(process.env.NODE_ENV !== 'development',
-      config => {
-        config.optimization.runtimeChunk('single'),
+    config.plugins.delete("preload"); // TODO: need test
+    config.plugins.delete("prefetch"); // TODO: need test
+    config.when(process.env.NODE_ENV !== "development", (config) => {
+      config.optimization.runtimeChunk("single"),
         {
-          from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-          to: './' //到根目录下
-        }
-      }
-    )
-  }
-}
+          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+          to: "./", //到根目录下
+        };
+    });
+  },
+};