添加 vue-amap demo

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@amap/amap-jsapi-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
+      "integrity": "sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw=="
+    },
     "@any-touch/compute": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/@any-touch/compute/-/compute-2.2.0.tgz",
@@ -14665,6 +14670,21 @@
       "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
       "dev": true
     },
+    "uppercamelcase": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz",
+      "integrity": "sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==",
+      "requires": {
+        "camelcase": "^1.2.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz",
+          "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g=="
+        }
+      }
+    },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npm.taobao.org/uri-js/download/uri-js-4.2.2.tgz",
@@ -14947,6 +14967,14 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
       "integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
     },
+    "vue-amap": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz",
+      "integrity": "sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==",
+      "requires": {
+        "uppercamelcase": "^1.1.0"
+      }
+    },
     "vue-baidu-map": {
       "version": "0.21.22",
       "resolved": "https://registry.npmmirror.com/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@liripeng/vue-audio-player": "^1.5.0",
     "axios": "^0.19.2",
     "babel-plugin-prismjs": "^2.0.1",
@@ -35,6 +36,7 @@
     "videojs-contrib-hls": "^5.15.0",
     "videojs-flash": "^2.2.1",
     "vue": "^2.6.11",
+    "vue-amap": "^0.5.10",
     "vue-baidu-map": "^0.21.22",
     "vue-clipboard2": "^0.3.3",
     "vue-cookies": "^1.7.0",

src/main.js

@@ -37,6 +37,15 @@ Vue.use(BaiduMap, {
   ak: ''
 })
 
+import VueAMap from 'vue-amap'
+Vue.use(VueAMap);
+VueAMap.initAMapApiLoader({
+  key: 'your amap key',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.4'
+})
+
 import VueClipboards from 'vue-clipboard2'
 Vue.use(VueClipboards);
 

src/router/index.js

@@ -40,6 +40,7 @@ const PostAnalysis = () => import('views/post/PostAnalysis')
 const MessageIndex = () => import('views/message/Message')
 const DiscoverIndex = () => import('views/home/Discover')
 const BdMap = () => import('views/home/BdMap')
+const AMap = () => import('views/home/AMap')
 
 const Admin = () => import('views/admin/AdminUser')
 const AdminUser = () => import('views/admin/AdminUser')
@@ -288,6 +289,16 @@ const routes = [
     name: 'BdMap',
     component: BdMap
   },
+  {
+    path: '/bdmap',
+    name: 'BdMap',
+    component: BdMap
+  },
+  {
+    path: '/amap',
+    name: 'AMap',
+    component: AMap
+  },
   {
     path: '/admin',
     name: 'Admin',

src/views/home/AMap.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="24">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item amap-wrapper">
+            <el-amap class="amap-box"
+                     :vid="'amap-vue'"
+                     :amap-manager="amapManager"
+                     :zoom="zoom"
+                     :center="mapCenter">
+              <el-amap-marker
+                v-for="(marker, index) in markers"
+                :position="marker"
+                :key="index"
+              ></el-amap-marker>
+            </el-amap>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+<!--    <el-col :md="12">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-card class="box-card">
+          <div class="text item amap-wrapper">
+            <span>另一个地图</span>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>-->
+  </el-row>
+</template>
+
+<script>
+import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
+let amapManager = new AMapManager();
+export default {
+  data () {
+    return {
+      mapCenter: [114.0000, 30.0000],
+      zoom: 6,
+      markers: [
+        [114.0000, 30.0000]
+      ],
+    }
+  }
+}
+</script>
+
+<style>
+.amap-wrapper {
+  width: 100%;
+  height: 600px;
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+</style>