腾讯地图定位

src/components/map/selectLocation.vue

@@ -10,7 +10,7 @@
       clearable="false"
       @select="handleSelect"
       :disabled="!isCanEdit"
-      v-show="type!=='view'"
+      v-show="type !== 'view'"
       @input="addressChangeHandle"
     >
       <template slot-scope="{ item }">
@@ -33,43 +33,42 @@ export default {
   props: {
     lat: {
       type: "string",
-      default: 23.1315381,
+      default: 23.1315381
     },
     lng: {
       type: "string",
-      default: 113.3324436,
+      default: 113.3324436
     },
     address: String,
     isCanEdit: Boolean,
     type: {
       type: "string",
-      default: "",
-    },
+      default: ""
+    }
   },
-  data () {
+  data() {
     return {
       map: "", // 地图实例
       mk: "", // Marker实例
       map2: "", // 地图实例
       mk2: "", // Marker实例,
       addressLocation: this.address,
-      key: "FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI",
-      addressTip: [],
+      key: "MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5",
+      addressTip: []
     };
   },
-  mounted () {
+  mounted() {
     this.initMap();
   },
   watch: {},
   methods: {
-    addressChangeHandle(val){
-      if(val == ""){
-        this.$emit('addressDel',"删除了地址数据")
+    addressChangeHandle(val) {
+      if (val == "") {
+        this.$emit("addressDel", "删除了地址数据");
       }
-      
     },
     // 初始化地图
-    initMap () {
+    initMap() {
       var that = this;
 
       if (this.isCanEdit) {
@@ -82,20 +81,20 @@ export default {
           zoomControl: true,
           //地图缩放控件参数
           zoomControlOptions: {
-            position: qq.maps.ControlPosition.TOP_LEFT,
+            position: qq.maps.ControlPosition.TOP_LEFT
           },
           //地图比例尺控件，若为false则不显示比例尺控件
-          scaleControl: false,
+          scaleControl: false
         });
 
         // 3、设置图像标注并绑定拖拽标注结束后事件
         this.mk = new qq.maps.Marker({
           position: point,
           draggable: true,
-          map: that.map,
+          map: that.map
         });
         // 绑定拖拽标注结束后事件
-        qq.maps.event.addListener(this.mk, "dragend", function (e) {
+        qq.maps.event.addListener(this.mk, "dragend", function(e) {
           that.getAddrByPoint(e.latLng);
         });
         //6、浏览器定位
@@ -103,7 +102,7 @@ export default {
           this.geolocation();
         }
         // 7、绑定点击地图任意点事件
-        qq.maps.event.addListener(this.map, "click", function (e) {
+        qq.maps.event.addListener(this.map, "click", function(e) {
           that.getAddrByPoint(e.latLng);
         });
       } else {
@@ -114,59 +113,59 @@ export default {
           zoom: 19,
           //地图缩放控件参数
           zoomControlOptions: {
-            position: qq.maps.ControlPosition.TOP_LEFT,
+            position: qq.maps.ControlPosition.TOP_LEFT
           },
           //地图比例尺控件，若为false则不显示比例尺控件
-          scaleControl: false,
+          scaleControl: false
         });
         // 2、设置图像标注并绑定拖拽标注结束后事件
         this.mk2 = new qq.maps.Marker({
           position: point2,
           draggable: false,
-          map: that.map2,
+          map: that.map2
         });
       }
     },
     // 浏览器定位函数
-    geolocation () {
+    geolocation() {
       var that = this;
       var geolocation = new qq.maps.Geolocation(
-        "FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI",
-        "jobslink 企业"
+        "MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5",
+        "后台管理"
       );
       geolocation.getLocation(this.showPosition, this.showErr, {
         timeout: 20000,
-        failTipFlag: true,
+        failTipFlag: true
       });
     },
-    showPosition (position) {
+    showPosition(position) {
       this.getAddrByPoint({
         lat: position.lat,
-        lng: position.lng,
+        lng: position.lng
       });
     },
-    showErr () {
+    showErr() {
       console.log("定位失败！");
     },
     // // 2、逆地址解析函数
-    getAddrByPoint (point) {
+    getAddrByPoint(point) {
       var currentPoint = new qq.maps.LatLng(point.lat, point.lng);
       var that = this;
       var location = point.lat + "," + point.lng;
-      getcoder(location, encodeURI(this.key), 0).then((res) => {
+      getcoder(location, encodeURI(this.key), 0).then(res => {
         that.mk.setPosition(currentPoint);
         that.map.panTo(currentPoint);
         let obj = {
           address: res.data.result.address,
           lng: point.lng,
-          lat: point.lat,
+          lat: point.lat
         };
-        that.addressLocation = obj.address
+        that.addressLocation = obj.address;
         that.$emit("addAddress", obj);
       });
     },
-    async querySearchAsync (queryString, cb) {
-      await querySearch(queryString, encodeURI(this.key)).then((res) => {
+    async querySearchAsync(queryString, cb) {
+      await querySearch(queryString, encodeURI(this.key)).then(res => {
         if (res.data.status === 0) {
           this.addressTip = res.data.data;
         }
@@ -179,7 +178,7 @@ export default {
       }, 1000 * Math.random());
     },
     // 8-2、选择地址
-    handleSelect (item) {
+    handleSelect(item) {
       this.addressLocation = item.address;
       var point = new qq.maps.LatLng(item.location.lat, item.location.lng);
       this.mk.setPosition(point);
@@ -188,11 +187,11 @@ export default {
         title: item.title,
         address: item.address,
         lng: item.location.lng,
-        lat: item.location.lat,
+        lat: item.location.lat
       };
       this.$emit("addAddress", obj);
-    },
-  },
+    }
+  }
 };
 </script>