百度地图---点亮城市

效果图

在这里插入图片描述
代码如下

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yZSTYLk9UUvs0ZqXqBbtTp8ViKk5vxLM"></script>
    <title>添加行政区划</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
    map.enableScrollWheelZoom();
    map.setMapStyle({
        style: "grayscale"
    });

    function getBoundary(cityName) {
        var bdary = new BMap.Boundary();
        bdary.get(cityName, function(rs) { //获取行政区域     
            map.clearOverlays();
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {
                    strokeWeight: 2,
                    strokeColor: "#ff0000",
                    fillColor: "#ff0000"
                }); //建立多边形覆盖物
                map.addOverlay(ply); //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            map.setViewport(pointArray); //调整视野  
        });
    }

    var a = [
        "北京市",
        "天津市",
        "石家庄市",
        "廊坊市",
        "太原市",
        "上海市",
        "杭州市",
        "绍兴市",
        "青岛市",
        "德州市",
        "武汉市",
        "广州市",
        "深圳市",
        "东莞市",
        "重庆市",
        "成都市",
        "眉山市",
        "西安市"
    ]
    var i = 0;

    var timer = setInterval(function() {
        if (i == a.length) {
            map.clearOverlays();
            map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
            for (var n = 0; n < a.length; n++) {
                getBoundary1(a[n])
            }
            clearInterval(timer)
        } else {
            getBoundary(a[i++])
        }
    }, 2000)


    function getBoundary1(cityName) {
        var bdary = new BMap.Boundary();
        bdary.get(cityName, function(rs) { //获取行政区域     
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {
                    strokeWeight: 2,
                    strokeColor: "#ff0000",
                    fillColor: "#ff0000"
                }); //建立多边形覆盖物
                map.addOverlay(ply); //添加覆盖物
            }
        });
    }
</script>
百度地图---点亮城市

效果图

代码如下

猜你喜欢
