直接上代碼
百度地圖和高德地圖差不多,也只能到市級,但是高德地圖是使用區域代碼,百度地圖是靠地名定位的區域,所有有可能會出現地名相同在地圖上沒有顯示的這種情況
// 百度地圖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);
}