使用百度地图绘制行政区划边界

1、需要注册百度地图开放平台，并且申请百度地图专用ak。

2、新建html页面，将百度地图JavaScript API以js的方式引入，注意，此处的ak就是上面申请的ak<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=igKR42424242242dfsdsLMHIj"></script>

3、在页面声明一个div元素，用于百度地图的容器，<div id="allmap" style="width: 100%; height: 100%; position: absolute;"></div>

4、编写js代码，实例化百度地图控件。本文以襄阳市为例var map = new 幞洼踉残BMap.Map("allmap")稆糨孝汶;//实例化 map.setMapStyle({ styleJson: [ { "featureType": "road", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } } ] }); var oldply; map.centerAndZoom("襄阳市", 9); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("襄阳市"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(); map.disableDoubleClickZoom();

5、编写获取行政区域边界坐标的方法，并添加点击事件。function getBou艘绒庳焰ndary(data) { var bdary = new BMap.Boundary(); bdary.get(data, function (rs) { var maxNum = -1, maxPly; var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeOpacity: 0.5, fillColor: "#CDAA7D", strokeColor: "#FF00FF" }); map.addOverlay(ply); //开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了 ply.addEventListener("click", function (e) { if (typeof (oldply) != "undefined") { oldply.setFillColor("#E0FFFF"); } ply.setFillColor("red"); oldply = ply; }); if (maxPly) { map.setViewport(maxPly.getPoints()); } }); }

6、调用获取边界的方法，绘制边界。此处请注意，如果给定的行政区划百度api查询不到，则不会绘制边界。 var datas = ["襄城区", "樊城区", "襄阳区", "南漳县", "谷城县", "保康县", "老河口市", "枣阳市", "宜城市"]; for (var i = 0; i < datas.length; i++) { getBoundary(datas[i]); }

7、运行代码，效果如图，可点击不同区域，且也有效果。