# 更新高德原生api

build/webpack.base.conf.js

@@ -96,5 +96,8 @@ module.exports = {
     net: 'empty',
     tls: 'empty',
     child_process: 'empty'
+  },
+  externals: {
+    'AMap': 'AMap'
   }
 }

index.html

@@ -11,5 +11,6 @@
     <!-- <script src=<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js></script> -->
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=49842c6fe4d24df80871faec2e272a00"></script> 
   </body>
 </html>

src/router/index.js

@@ -65,7 +65,7 @@ export const constantRouterMap = [
       { path: 'device', component: () => import('@/views/counter/device'), name: 'device', meta: { title: 'device' }},
       { path: 'detail', component: () => import('@/views/counter/detail'), name: 'detail', meta: { title: 'detail' }},
       { path: 'logs', component: () => import('@/views/counter/logs'), name: 'logs', meta: { title: 'logs' }},
-      { path: 'map', component: () => import('@/views/counter/map'), name: 'map', meta: { title: 'map' }}
+      { path: 'map', component: () => import('@/views/counter/map2'), name: 'map', meta: { title: 'map' }}
     ]
   }
   // {

src/views/counter/map2.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="app-container">
+      <div id="map-container" tabindex="0"></div>
+  </div>
+</template>
+
+<script>
+import AMap from 'AMap'
+export default {
+  name: 'map2',
+  data() {
+    return {
+      flag: false,
+      defaultPositions: [
+        {
+          title: '海洋公园',
+          position: [114.186739, 22.250872]
+        },
+        {
+          title: '香港大学',
+          position: [114.143472, 22.284105]
+        },
+        {
+          title: '南丫北容村',
+          position: [114.126261, 22.22863]
+        },
+        {
+          title: '大帽山',
+          position: [114.124105, 22.401088]
+        },
+        {
+          title: '恒生管理学院',
+          position: [114.223565, 22.380771]
+        },
+        {
+          title: '盐田',
+          position: [114.223565, 22.380771]
+        },
+        {
+          title: '清水',
+          position: [114.312821, 22.301076]
+        }
+      ]
+    }
+  },
+  methods: {
+    initMap() {
+      const map = new AMap.Map('map-container', {
+        center: [114.143472, 22.284105],
+        resizeEnable: true,
+        zoom: 10
+      })
+      // 测试数据
+      const markers = []
+      this.defaultPositions.forEach((item, index) => {
+        const marker = new AMap.Marker({
+          position: item.position,
+          zIndex: 10,
+          title: item.title,
+          map: map
+        })
+        markers.push(marker)
+      })
+      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
+        map.addControl(new AMap.ToolBar())
+        map.addControl(new AMap.Scale())
+      })
+    }
+  },
+  mounted() {
+    this.initMap()
+  }
+}
+</script>
+
+<style lang="scss">
+  #map-container {
+    width: 100%;
+    height: 80%;
+    overflow: hidden;
+    position: absolute;
+  }
+</style>