有些时候我们只需要某个省份的行政区域，那么运用百度地图如何实现呢？
我们先上效果图：
步骤：
创建map实例
html代码：
<div id="main" style="width: 100%;height: 100vh;overflow:hidden;"></div>
script代码：
var map;function createMap() {map = new BMap.Map('main'); // mian为地图的容器idmap.centerAndZoom(new BMap.Point(106.714476, 26.60403), 8);// 将地图在水平位置上移动x像素，垂直位置上移动y像素(x,y)map.panBy(-210, 330);getBoundary();}createMap();
绘制行政区域外覆盖物
function getBoundary() {map.clearOverlays(); // 清除地图的其余覆盖物const bdary = new BMap.Boundary();bdary.get('贵州省', (rs) => {const count = rs.boundaries.length;if (count === 0) {return ;}const EN_JW = '180, 90;';const NW_JW = '-180, 90;';const WS_JW = '-180, -90;';const SE_JW = '180, -90;';// 东南西北四个角添加一个覆盖物const ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,{ strokeColor: 'none', fillColor: '#333', fillOpacity: 1, strokeOpacity: 1 });map.addOverlay(ply1);// 绘制‘贵州省’整体的外轮廓for (let i = 0; i < count; i++) {const ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.5, strokeColor: 'transparent', fillColor: 'transparent'});map.addOverlay(ply);}getRegion();});}
绘制省内各个市州的区划
1）获取到省内各个市州的名称以及他们的中心点坐标写成一个变量
var dataArr = [{"name": '安顺市',"cp": [105.9082, 25.9882]},{"name": "贵阳市","cp": [106.6992, 26.7682]},{"name": "遵义市","cp": [106.908, 28.1744]},{"name": "黔东南苗族侗族自治州","cp": [108.519944, 26.835886]},{"name": "毕节市","cp": [105.1611, 27.0648]},{"name": "黔南布依族苗族自治州","cp": [107.235181, 25.705737]},{"name": "黔西南布依族苗族自治州","cp": [105.5347, 25.3949]},{"name": "六盘水市","cp": [104.7546, 26.0925]},{"name": "铜仁市","cp": [108.6218, 28.0096]}];
2）绘制各个市州的轮廓
function getRegion() {dataArr.forEach(element => {var bdary = new BMap.Boundary();bdary.get(element['name'], rs => {var count = rs.boundaries.length;for (let i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: 0.6, fillColor: '#a9dbf7'});this.map.addOverlay(ply);}citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]) , element['name']);});});}
注意： 若是想画自定义的某个市州区县，那么我们可以再定一个变量存放这个区县的区划坐标，具体的区划坐标我们要按照百度地图的格式，如：
var newData = {"name": "贵安新区","cp": [106.347343,26.466366],"coordinates": [[106.062, 26.4606],[106.1279, 26.4935],[106.1389, 26.5869],[106.1609, 26.5979],... // 区划的边线经纬度]}
接下来我们修改上面的getRegion() 方法，让它最后画该区域，可以保证其他区域不可以覆盖此区域：
var regionNum = 0;function getRegion() {dataArr.forEach(element => {regionNum++;var bdary = new BMap.Boundary();bdary.get(element['name'], rs => {var count = rs.boundaries.length;for (let i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: 0.6, fillColor: '#a9dbf7'});this.map.addOverlay(ply);}citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]) , element['name']);regionNum--;if (regionNum === 0) { // 最后才画贵安新区var newplyArr = [];newData['coordinates'].forEach(item => {newplyArr.push(new BMap.Point(item[0], item[1]));});const newply = new BMap.Polygon(newplyArr, {strokeWeight: 0.6, strokeColor: '#fff', fillOpacity: 0.3, fillColor: '#a9dbf7'});map.addOverlay(newply);citySetLabel(new BMap.Point(newData['cp'][0], newData['cp'][1]) , newData['name']);}});});}
城市中心点坐标显示label
citySetLabel(cityCenter, cityName) {var label = new BMap.Label(cityName, {offset: new BMap.Size(-20, -10),position: cityCenter});label.setStyle({border: 'none',background: 'transparent','font-size': '0.25rem',color: '#fff',});map.addOverlay(label);}
