直接上代码
百度地图和高德地图差不多,也只能到市级,但是高德地图是使用区域代码,百度地图是靠地名定位的区域,所有有可能会出现地名相同在地图上没有显示的这种情况
// 百度地图API功能
var map = new BMap.Map("allmap", { minZoom: 7, maxZoom: 18 }); // 创建Map实例
map.centerAndZoom(new BMap.Point(106.524517, 29.546878), 8); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
var cityName = '重庆市';
var dataArr = [
{
"name": '九龙坡区',
"cp": [105.9082, 25.9882]//llabel 显示的位置
},
{
"name": "渝中区",
"cp": [106.6992, 26.7682]
}];
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
var bdary = new BMap.Boundary();
bdary.get(cityName, function (rs) { //获取行政区域
var EN_JW = "180, 90;"; //东北角
var NW_JW = "-180, 90;"; //西北角
var WS_JW = "-180, -90;"; //西南角
var SE_JW = "180, -90;"; //东南角
//4.添加环形遮罩层
var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(13,13,40)", fillOpacity: 1, strokeOpacity: 0.5 }); //建立多边形覆盖物
map.addOverlay(ply1);
getRegion();
});
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: 'rgb(45,67,114)'
});
this.map.addOverlay(ply);
}
citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]) , element['name']);
});
});
}
function 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);
}