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)
       })
     })
   }
 }
}