百度地图开发时，如何只显示某省，以及该省各市的边界

作者：vkvi 来源：ITPOW（原创） 日期：2021-8-25

首先、隐藏整个地图

利用 map.setMapStyle 将不要的公路啊、水系啊这些隐藏起来，再设置背景色为我们想要的颜色（注意顺序，先隐藏全部、再显示单个），如下：

[
	{
		"featureType": "all",
		"elementType": "all",
		"stylers": {
			"visibility": "off"
		}
	},
	{
		"featureType": "background",
		"elementType": "all",
		"stylers": {
		"color": "#012244",
			"visibility": "on"
		}
	}
]

上述是个 JSON，然后用 setMapStyle 将上述 JSON 用起来，如下：

map.setMapStyle({
  styleJson:[[上面的json对象]]
});

这就得到了一个深蓝色的背景。就像一个纯色的 div，但是它的功能可是强大的。如果不熟悉的话，可以参见这个网址，在线调试：百度地图个性在线编辑器。这个编辑器的使用方法是：先在左边建立样式，然后选择这个样式作用的元素，然后再设置这些元素的具体样式。如上选择的元素：一个是“全部”，一个是“地图背景”。

其次、添加“市”边界

for (var i = 0; i < boundaries.length; i++) {
	var polygon = new BMap.Polygon(boundaries[i], {
		strokeWeight: 2,
		strokeColor: "#999",
		fillOpacity: 1,
		fillColor: colors[i]
	});
	map.addOverlay(polygon); 
}

colors 是一个数组，里面为各个“市”配置了不同的颜色。

boundaries 也是一个数组，里面存储的是各个“市”的经纬度。每一个“市”的经纬度格式为：经度1,纬度1;经度2,纬度2;经度3,纬度3……

那么这些经纬度从哪些来呢？

var boundary = new BMap.Boundary();
boundary.get(districtName, function (rs) {
	console.log(rs.boundaries.length);
});

获取的经纬度可以直接用，也可以存起来再用，免得每次都获取。

然后、添加“市”名称

也就是在“市”的某个位置，添加上 label，可以自己写，也可以用搜索的方法来实现（来源网上）：

function showCityName(cityName) {
    var local = new BMap.LocalSearch(map, {
        onSearchComplete: function () {
            var cityCenter = local.getResults().getPoi(0).point;
            var label = new BMap.Label(cityName, {
                offset: new BMap.Size(-20, -10),
                position: cityCenter
            });
            label.setStyle({
                border: 'agba(0,0,0,0)',
                backgroundColor: 'agba(0,0,255,0)',
                fontSize: '12px',
                color: '#fff',
            });
            map.addOverlay(label);
        },
    });
    local.search(cityName);
}

最后、还想改造下信息框

信息框在各“市”上显示时，地图会自动移动，以显示这个信息框。

但是信息框的样式不是我们想要的，通过 CSS 改造即可，比如：

.BMap_pop .BMap_top,
.BMap_pop .BMap_center,
.BMap_pop .BMap_bottom{ border:0 !important; background:rgba(124, 176, 215, 0.8) !important;}
.BMap_pop .infoLine{ line-height:30px; max-width:136px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:#fff; }
.BMap_pop .infoLine span{ color:#ff8a00; }
.BMap_pop div:nth-child(1){ background:transparent !important;}
.BMap_pop div:nth-child(1) div{ border-radius:10px 0 0 0; border:0 !important; background:rgba(124, 176, 215, 0.8) !important;}
.BMap_pop div:nth-child(2){ width:145px !important;}
.BMap_pop div:nth-child(3){ background:transparent !important; left:170px !important;}
.BMap_pop div:nth-child(3) div{ border-radius:0 10px 0 0; border:0 !important; background:rgba(124, 176, 215, 0.8) !important;} 
.BMap_pop div:nth-child(4){ width:194px !important;} 
.BMap_pop div:nth-child(5){background:transparent !important;}
.BMap_pop div:nth-child(5) div{ border-radius:0 0 0 10px; border:0 !important; background:rgba(124, 176, 215, 0.8) !important;}
.BMap_pop div:nth-child(6){ width:145px !important;} 
.BMap_pop div:nth-child(7){ background:transparent !important; left:170px !important;}
.BMap_pop div:nth-child(7) div{ border-radius:0 0 10px 0; border:0 !important; background:rgba(124, 176, 215, 0.8) !important;}
img[src="http://api0.map.bdimg.com/images/iw_close1d3.gif"]{ display:none !important;}
img[src="http://api0.map.bdimg.com/images/iw3.png"]{ display:none !important;}


相关文章