feat: amap

change from baidu map to amap

.env

@@ -43,5 +43,5 @@ VUE_APP_CAMERA_PROXY = '/prod-api/websocket'
 # user default password
 VUE_APP_USER_PASSWORD = '111111'
 
-# baidu
-VUE_APP_BAIDU_MAP_AK = 'pXRq1aj9zuZlacGvU261cKgfyYroGWsf'
+# gaode
+VUE_APP_GAODE_MAP_KEY = '9c499e7000d066c05de9af8556a890f7'

package.json

@@ -10,6 +10,7 @@
     "commit": "cz"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "app-info-parser": "^1.1.3",
     "axios": "^0.24.0",
     "core-js": "^3.6.5",
@@ -25,7 +26,6 @@
     "path-to-regexp": "^6.2.0",
     "spark-md5": "^3.0.2",
     "vue": "^2.6.11",
-    "vue-baidu-map": "^0.21.22",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.4.0"

src/views/device/detail/components/DeviceInfo.vue

@@ -56,8 +56,7 @@
       </div>
     </div>
     <device-map
-      v-if="__STAGING__"
-      class="l-flex__auto o-baidu-map"
+      class="l-flex__auto o-map"
       :device="device"
     />
     <confirm-dialog
@@ -101,7 +100,7 @@
         <span />
         <a
           class="o-link grid"
-          href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
+          href="https://lbs.amap.com/tools/picker"
           target="_blank"
         />
       </div>
@@ -193,7 +192,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.o-baidu-map {
+.o-map {
   min-height: 300px;
   max-height: 600px;
 }

src/views/device/detail/components/DeviceMap.vue

@@ -1,39 +1,12 @@
 <template>
-  <baidu-map
-    v-if="center"
-    :ak="ak"
-    :center="center"
-    :zoom="19"
-    :dragging="false"
-    :keyboard="false"
-  >
-    <bm-marker
-      :position="center"
-      @click="show = true"
-    >
-      <bm-info-window
-        :show="show"
-        @open="show = true"
-        @close="show = false"
-      >
-        {{ device.address }}
-      </bm-info-window>
-    </bm-marker>
-  </baidu-map>
+  <div ref="map" />
 </template>
 
 <script>
-import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
-import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
-import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
+import AMapLoader from '@amap/amap-jsapi-loader'
 
 export default {
   name: 'DeviceMap',
-  components: {
-    BaiduMap,
-    BmMarker,
-    BmInfoWindow
-  },
   props: {
     device: {
       type: Object,
@@ -50,12 +23,48 @@ export default {
     center () {
       const { longitude, latitude } = this.device
       return longitude && latitude
-        ? {
-          lng: Number(longitude),
-          lat: Number(latitude)
-        }
+        ? [Number(longitude), Number(latitude)]
         : null
     }
+  },
+  watch: {
+    center () {
+      if (this.center) {
+        if (this.map) {
+          this.map.setZoomAndCenter(18, this.center)
+          this.map.getAllOverlays('marker')[0].setPosition(this.center)
+        } else {
+          this.initMap()
+        }
+      } else {
+        this.map?.destroy()
+        this.map = null
+      }
+    }
+  },
+  mounted () {
+    this.center && this.initMap()
+  },
+  beforeDestroy () {
+    this.map?.destroy()
+  },
+  methods: {
+    initMap () {
+      AMapLoader.load({
+        key: process.env.VUE_APP_GAODE_MAP_KEY,
+        version: '2.0',
+        plugins: ['']
+      }).then(AMap => {
+        this.map = new AMap.Map(this.$refs.map, {
+          zoom: 18,
+          center: this.center
+        })
+        this.map.add(new AMap.Marker({
+          position: this.center,
+          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
+        }))
+      })
+    }
   }
 }
 </script>

yarn.lock

@@ -11,6 +11,11 @@
     event-pubsub "4.3.0"
     js-message "1.0.7"
 
+"@amap/amap-jsapi-loader@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz#9ec4b4d5d2467eac451f6c852e35db69e9f9f0c0"
+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==
+
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -2495,33 +2500,6 @@ bluebird@^3.1.1, bluebird@^3.5.0, bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bmaplib.curveline@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz#826eb0bf1c59fad1b23142be66fc360cf009aea2"
-  integrity sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==
-
-bmaplib.heatmap@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz#30161262771fe78af35705ff92457725de5d9850"
-  integrity sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==
-
-bmaplib.lushu@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz#77c17dcf7148d30c46e8430c7ff86b20e418b8b8"
-  integrity sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w==
-
-bmaplib.markerclusterer@^1.0.13:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz#442d71a6c40844ee47d01f6db2166b54530b5bd1"
-  integrity sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==
-  dependencies:
-    bmaplib.texticonoverlay "^1.0.2"
-
-bmaplib.texticonoverlay@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz#d78546ea0f036d9fe964983796315b6c112a05bf"
-  integrity sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==
-
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
@@ -4403,7 +4381,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-entities@^1.1.1, entities@~1.1.1:
+entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
@@ -6666,13 +6644,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-linkify-it@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
-  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
-  dependencies:
-    uc.micro "^1.0.1"
-
 lint-staged@^9.5.0:
   version "9.5.0"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-9.5.0.tgz#290ec605252af646d9b74d73a0fa118362b05a33"
@@ -6979,17 +6950,6 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-it@^8.4.0:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
-  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
-  dependencies:
-    argparse "^1.0.7"
-    entities "~1.1.1"
-    linkify-it "^2.0.0"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -7009,11 +6969,6 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -10213,11 +10168,6 @@ typescript@^4.4.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
   integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
 
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -10489,17 +10439,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-vue-baidu-map@^0.21.22:
-  version "0.21.22"
-  resolved "https://registry.yarnpkg.com/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz#6b76a91ef34f18a782d732ab0f541a1a3aa069e0"
-  integrity sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==
-  dependencies:
-    bmaplib.curveline "^1.0.0"
-    bmaplib.heatmap "^1.0.4"
-    bmaplib.lushu "^1.0.7"
-    bmaplib.markerclusterer "^1.0.13"
-    markdown-it "^8.4.0"
-
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"