高德地图Vue+vue-amap

1. 参考文档地址

vue-amap、 高德webJS、 高德AMapUI 组件库

vue-amap文档示例和地图无法显示问题 git地址下载代码，修改如下图index.html文件

npm install ——>npm run dev 就可以了

2.地图引用

1.安装依赖

npm install vue-amap --save

2.初始化地图main.js

import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
   key: '高德地图申请的key',
   plugin: ['AMap.DistrictLayer'],//需要用到行政区图层插件
   v: '2.0',//不填默认1.4.4，不同版本可能功能会有区别，这里我用到的是2.0版本
   uiVersion: '1.1' // AMapUI版本，不配置不加载,和webJS2.0版本对应的是1.1
})

3.创建地图组件AMAP.vue

<template>
  <div style="width:500px;height:500px" :id="uuId"></div>
</template>
<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
export default {
  data() {
    return {
      uuId: String(Math.ceil(Math.random() * 1000000)),
      map: null,
      infoWindow: null
    }
  },
  mounted() {
    const _this = this
    lazyAMapApiLoaderInstance.load().then(() => {
      //加载DistrictExplorer，loadUI的路径参数为模块名中 'ui/' 之后的部分
      AMapUI.loadUI(['geo/DistrictExplorer', 'overlay/SimpleInfoWindow'], function(DistrictExplorer, SimpleInfoWindow) {
        //启动页面
        _this.init(DistrictExplorer, SimpleInfoWindow)
      })
    })
  },
  methods: {
    init(DistrictExplorer, SimpleInfoWindow) {
      const _this = this
      var disCountry = new AMap.DistrictLayer.World({
        zIndex: 10,
        SOC: 'CHN',
        depth: 1 //显示层级
      })

      _this.infoWindow = new SimpleInfoWindow({
        myCustomHeader: '我的header',
        myCustomFooter: '我的footer',
        // infoTitle: '<strong>这里是标题</strong>',
        //   infoBody: '<p class="my-desc"><strong>这里是内容。</strong></p>',
        //基点指向marker的头部位置
        offset: new AMap.Pixel(0, -31)
      })
      _this.map = new AMap.Map(_this.uuId, {
        zoomEnable: false, //缩放
        dragEnable: false, //拖动
        layers: [disCountry],
        defaultCursor: 'pointer',
        viewMode: '2D',
        resizeEnable: true
      })

      //创建一个实例
      let districtExplorer = new DistrictExplorer({
        map: _this.map,
        eventSupport: true, //打开事件支持
        preload: [100000] //预加载全国
      })

      var adcode = 100000 //全国的区划编码
      districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
        if (error) {
          console.error(error)
          return
        }
        //绘制载入的区划节点
        _this.renderAreaNode(districtExplorer, areaNode)
      })
      //监听feature的hover事件
      districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
        _this.toggleHoverFeature(districtExplorer, feature, e.type === 'featureMouseover', e.originalEvent ? e.originalEvent.lnglat : null)
      })
    },
    renderAreaNode(districtExplorer, areaNode) {
      //清除已有的绘制内容
      districtExplorer.clearFeaturePolygons()
      //设置当前使用的定位用节点
      districtExplorer.setAreaNodesForLocating([areaNode])
      //just some colors
      var colors = ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00']

      //绘制子级区划
      districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
        var fillColor = colors[i % colors.length]
        // var strokeColor = colors[colors.length - 1 - (i % colors.length)]

        return {
          cursor: 'pointer',
          bubble: true,
          strokeColor: fillColor, //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: fillColor, //填充色
          fillOpacity: 0.7 //填充透明度
        }
      })

      //绘制父级区划，仅用黑色描边
      districtExplorer.renderParentFeature(areaNode, {
        cursor: 'pointer',
        bubble: true,
        strokeColor: 'black', //线颜色
        fillColor: null,
        strokeWeight: 1 //线宽
      })

      //更新地图视野以适合区划面
      this.map.setFitView(districtExplorer.getAllFeaturePolygons())
    },
    //根据Hover状态设置相关样式
    toggleHoverFeature(districtExplorer, feature, isHover, position) {
      const _this = this
      if (!isHover) {
        _this.infoWindow.close()
      }
      if (!feature) {
        return
      }

      var props = feature.properties

      if (isHover) {
        _this.infoWindow.open(_this.map, position || props.center)
        _this.infoWindow.setInfoTitle(props.name)
      }

      //更新相关多边形的样式
      var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode)
      for (var i = 0, len = polys.length; i < len; i++) {
        polys[i].setOptions({
          fillOpacity: isHover ? 1 : 0.7
        })
      }
    }
  }
}
</script>

4.使用组件

<template>
  <div>
    <AMap/>
  </div>
</template>
<script>
import AMap from '@/components/common/chart/AMAP.vue'

export default {
  components: {
    AMap
  }
}
</script>

最终效果