vue使用高德地图的行政区域浏览

工作用遇到这样的需求，要求在地图上把每个行政区画上不同的色块， 并且添加一个标注文本来说明，也就是实现下图这种的效果 ： 这是金华市下的各级县市的 区域划分

上面的效果， 高德可以有两种方式来实理

一 绘制行政区划边界 高德地图api

二 UI组件-行政区划浏览 UI组件库-行政区划浏览参考文档

我们这里来说明一下， 第二种方法的使用
方法如下

1. 引入 UI 组件库
   
   这里还是说一下 vue 中的 AMap 和 AMapUI 的引入吧，（不用 npm 下载 Amap 的 包）
   在vue 文件的 public/index.html中引入
   
   上面的引入高德地图的方式， 是官方最新更新的， 如果是 2021年12月以前生成的key 使用老的引用方式， 如果是2021年12月以后 生成的key 就可使用上面的这种新的引入方式 高德地图最新引入说明

之后， vue.config.js中 把 AMap 和 AMapUI 注入的 window 对象下

这样就可以在 vue 的方法中使用 AMap 或者 AMapUI了

实现上面的功能

全国的区划信息见 也就是区域编码 这里

....
mounted(){
	this.initData();
}

initData(){
	//创建一下地图对象
	 var map = new AMap.Map('container', {
          cursor: 'default',
          zoom: 3
     });
	
	//载入 UI 插件
	AMapUI.load(["ui/geo/DistrictExplorer"],function(DistrictExplorer){
        var districtExplorer = window.districtExplorer = new DistrictExplorer({
          map:map,
        });
   
        //设置当前使用的定位用节点
        var currentAreaNode = 330700;   //这里是金华的区域码
        districtExplorer.setAreaNodesForLocating([currentAreaNode]);
        //文档上说 areaNode 只能通过  loadAreaNode方法和 loadMutiuAreaNode
        districtExplorer.loadAreaNode(currentAreaNode, function(error, areaNode) {
			if(error){
				return;
			}
			 //更新地图视野  它会根据浏览器自动更新
			map.setBounds(areaNode.getBounds(), null, null, true);
			//清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();

			 //绘制子区域
			 // 这个方法内部应该有一个 foreach 的循环的过程， 不需要使用者去显示的 循环每一个子节点
          districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
			//这里是随便设置了几个不同的 填充色  和 边框色
            var fillColor = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
              "#b82e2e", "#316395"];
            var strokeColor = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
              "#b82e2e", "#316395"];

			//--------------------------这里是在画文本标记-------------------------------------
			//这里通过  feature 的属性， 得到行政区域的中心点， 准备把 文标标记放在这个位置上
            let center = feature.properties.center;
            let text = new AMap.Text({
              text:"1598",
              anchor:'center', // 设置文本标记锚点
              draggable:true,
              cursor:'pointer',
              style:{
                'display':"inline",
                'background-color': 'white',
                'width': '15rem',
                'border-width': 0,
                'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                'text-align': 'center',
                'font-size': '9px',
                'color': 'blue'
              },
              position:center
            })

            text.setMap(map);
			//------------------------------这里是在画文本标记------------------------------------
            return {
              cursor: 'default',
              bubble: true,
              strokeColor: strokeColor[i+1], //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 1, //线宽
              fillColor: fillColor[i], //填充色
              fillOpacity: 0.35, //填充透明度
            };
          });

 			//绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: "#f7ede4",
            fillOpacity: 0.05, //填充透明度
          });
  		});
   });
}
....

通过上面的步骤就可以得到我们想要的功能了

区域点击高亮的代码 参考

再说明一下， 如果想让上面的地图监听到事件， 、

地图上的覆盖物 要加上 bubble:true