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

大家好，我是讯享网，很高兴认识大家。

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

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

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

在这里插入图片描述

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

引入 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 = ; //这里是金华的区域码 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", "#", "#", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#"]; var strokeColor = ["#3366cc", "#dc3912", "#ff9900", "#", "#", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#"]; //--------------------------这里是在画文本标记------------------------------------- //这里通过 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, //填充透明度 }); }); }); } ....