vue高德地图多边形覆盖区

高德地图准备工作

安装amap

cnpm国内安装比npm更快些；

cnpm install vue-amap --save

main.js

配置amap的基础配置项

import GaodeMap from 'vue-amap'
Vue.use(GaodeMap)
GaodeMap.initAMapApiLoader({
    key: 'testkey', // 这里填写你申请的key
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], // 使用到的工具
    v: '1.4.4', // 版本号
    uiVersion: '1.0'
})

.eslintrc.js

 插入全局变量防止报错，如下代码

globals: {
    AMap: true,
    AMapUI: true
}

行政区覆盖

HTML部分代码

 <template>
  <el-amap ref="map" style="width:100vw;height:100vh" />
</template>

JavaScript部分代码

export default {
  name: 'Map',
  data(){
    return {}
  },
  mounted() {
    // 具体数据覆盖根据实际需求调整(注意如果要根据areacode查询，该字段必须设置为字符串类型)
    this.loadMap([{name:'北京',areacode:'110000'},{name:'天津',areacode:'120000'}])
  },
  methods: {
    loadMap(data){
      this.$nextTick(() => {
        var map = this.$refs.map.$$getInstance() // 获取地图实例
        if(map){
          map.setZoom(6) // 设置缩放等级
          map.setStatus({zoomEnable: false}) // 禁用缩放
          map.setFeatures(['point', 'bg']) // 设置显示覆盖物
          AMap.service(['AMap.DistrictSearch'], () => {
            var district = new AMap.DistrictSearch({
              showbiz: false, // 禁用商圈返回，提升覆盖速度
              subdistrict: 0, // 获取边界不需要返回下级行政区
              extensions: 'all', // 返回行政区边界坐标组等具体信息
              level: 'province' // 查询行政级别为省
            })
            data.forEach((row) => {
              var polygons = []
              // 注意使用的areacode必须是字符串类型
              district.search(row.areacode, (status, result) => {
                var bounds = result.districtList[0].boundaries // 获取边界
                if (bounds) {
                  for (var i = 0, l = bounds.length; i < l; i++) {
                    // 生成行政区划polygon
                    var polygon = new AMap.Polygon({
                      strokeWeight: 1,
                      path: bounds[i],
                      fillOpacity: 0.4,
                      fillColor: '#80d8ff',
                      strokeColor: '#0091ea'
                    })
                    // 触碰事件
                    polygon.on('mouseover', () => {
                      polygon.setOptions({
                        fillOpacity: 0.7,
                        fillColor: '#80d8ff'
                      })
                    })
                    // 点击事件
                    polygon.on('click', () => {
                      console.log('点击了行政区')
                    })
                     // 移开事件
                    polygon.on('mouseout', () => {
                      polygon.setOptions({
                        fillOpacity: 0.4,
                        fillColor: '#80d8ff'
                      })
                    })
                    polygons.push(polygon)
                  }
                }
                // 将多边形添加到地图上
                map.add(polygons)
              })
            })
          })
        }
        // 防止出现地图加载慢，获取不到对象问题
        setTimeout(()=>{
          this.loadMap(data)
        })
      })
    }
  }
}