vue + 高德地图 + 图例

其他：
vue + 高德地图 + 普通标记点
vue + 高德地图 + 标记点（变大变小闪烁动画、多标记点、同一位置标记点显示个数）

效果图：

npm install vue-amap --save

在main.js中：

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '你的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'
})

index.html 的中引入

<script src="//webapi.amap.com/maps?v=1.4.15&key=你的key值&&plugin=AMap.MarkerClusterer,AMap.Autocomplete,AMap.MapType,AMap.PolyEditor,AMap.MouseTool,AMap.AdvancedInfoWindow,AMap.Scale,AMap.ToolBar,AMap.RangingTool"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.4.11"></script>

在webpack.base.conf.js的externals中加入AMap: ‘AMap’

externals: {
    AMap: 'AMap'
}

使用：

<template>
  <div>
    <!-- 地图 -->
    <div id="map" style="position:relative;margin:0 15px;height:700px">
      <!-- 图例 -->
      <div style="position:absolute;top:5px;left:5px;z-index:2000;background-color:#333;padding-right:10px">
        <p class="mapLegend" style="background-color:#F56C6C"/>
        <span style="color:#F56C6C">告警设备</span>
        <p class="mapLegend" style="background-color:#F0BD14"/>
        <span style="color:#F0BD14">离线设备</span>
        <p class="mapLegend" style="background-color:#1AFF00"/>
        <span style="color:#1AFF00">正常设备</span>
      </div>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap'

export default {
  name: 'Home',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 绘制地图
    initMap () {
      // 地图
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        center: [120, 35], // 经纬度
        zoom: 12 // 远近
      })
    }
  }
}
</script>
<style scoped>
.mapLegend{
  margin:8px 0 8px 10px;
  display:inline-block;
  vertical-align:middle;
  height:12px;
  width:12px;
  border-radius:6px
}
</style>