# up map

package.json

@@ -56,6 +56,7 @@
     "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
     "vue": "2.5.10",
+    "vue-amap": "^0.5.8",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-multiselect": "2.0.8",

src/main.js

@@ -23,7 +23,18 @@ Vue.use(VueAMap)
 
 VueAMap.initAMapApiLoader({
   key: '29fc9d79996d548cb00726229752cd1f',
-  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  plugin: [
+    'AMap.Geolocation',
+    'AMap.Driving',
+    'AMap.Autocomplete',
+    'AMap.PlaceSearch',
+    'AMap.Scale',
+    'AMap.OverView',
+    'AMap.ToolBar',
+    'AMap.MapType',
+    'AMap.PolyEditor',
+    'AMap.CircleEditor'
+  ],
   // 默认高德 sdk 版本为 1.4.4
   v: '1.4.4'
 })

src/views/counter/device.vue

@@ -80,9 +80,11 @@
         min-width="100">
         <template slot-scope="scope">
           <el-button type="text"
-            @click="handleDeviceClick(scope.row.device_id)" size="small">详情
+            @click="handleDetailClick(scope.row.device_id)" size="small">详情
+          </el-button>
+          <el-button type="text"
+            @click="handleMapClick(scope.row.device_id)" size="small">地图
           </el-button>
-          <el-button type="text" size="small">地图</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -138,13 +140,21 @@ export default {
       this.listLoading = true
       this.getDevices({ page })
     },
-    handleDeviceClick(deviceID) {
+    handleDetailClick(deviceID) {
       // console.log(deviceID)
       this.$store.dispatch('chnageDeviceID', deviceID).then(() => {
         this.$router.push('/counter/detail')
       }).catch(() => {
         console.log('Err: get device_id failed in device page')
       })
+    },
+    handleMapClick(deviceID) {
+      // console.log(deviceID)
+      this.$store.dispatch('chnageDeviceID', deviceID).then(() => {
+        this.$router.push('/counter/map')
+      }).catch(() => {
+        console.log('Err: get device_id failed in device page')
+      })
     }
   },
   created() {

src/views/counter/map.vue

@@ -1,21 +1,92 @@
 <template>
   <div class="app-container">
     <div class="amap-wrapper">
-      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
+      <el-amap v-if="flag" :zoom="zoom" :center="center" :plugin="plugin" class="amap-box" :vid="'amap-vue'">
+        <el-amap-marker
+          v-for="(marker, index) in markers"
+          :key="index"
+          :position="marker.position"
+          :visible="marker.visible" :draggable="marker.draggable" :vid="index"
+        >
+        </el-amap-marker>
+      </el-amap>
     </div>
   </div>
 </template>
 
 <script>
+import { fetchDeviceList } from '@/api/counter'
+const defaultEvents = {
+  click: () => {
+    alert('click marker')
+  },
+  dragend: (e) => {
+    console.log('---event---: dragend')
+    this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
+  }
+}
 export default {
-  name: 'map'
+  name: 'amap',
+  data() {
+    return {
+      flag: false,
+      defaultPositions: [
+        {
+          name: '上海',
+          position: [121.59996, 31.197646]
+        },
+        {
+          name: '古镇',
+          position: [113.203698459202, 22.649173177084]
+        }
+      ],
+      zoom: 16,
+      center: [113.203698459202, 22.649173177084],
+      markers: [],
+      plugin: ['ToolBar', {
+        pName: 'MapType',
+        defaultType: 0,
+        events: {
+          init(o) {
+            console.log(o)
+          }
+        }
+      }]
+    }
+  },
+  methods: {
+    getDevices(params) {
+      fetchDeviceList(params).then(response => {
+        this.deviceList = response.data.results
+        // console.log(this.deviceList)
+        this.coordinate = this.deviceList[0].coordinate
+        if (this.coordinate === null) {
+          this.coordinate = [113.203460828994, 22.64902452257]
+        }
+        // console.log(this.coordinate)
+        this.flag = true
+      })
+    }
+  },
+  created() {
+    const device_id = this.$store.getters.deviceID
+    this.getDevices({ device_id })
+    this.defaultPositions.forEach((item, index) => {
+      const entry = {}
+      entry.position = item.position
+      entry.events = defaultEvents
+      entry.visible = true
+      entry.draggable = false
+      this.markers.push(entry)
+    })
+  }
 }
 </script>
 
 <style lang="scss">
   .amap-wrapper {
     width: 100%;
-    height: 100%;
+    height: 80%;
     overflow: hidden;
     position: absolute;
 }