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

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 getBoundary(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、运行代码，效果如图，可点击不同区域，且也有效果。