在百度地图或谷歌地图给中国各省着色并高亮显示

佚名 7年前 (2019-04-23) 随笔 1356人围观抢沙发百度已收录

最近有朋友需要在百度地图中给各省按不同颜色显示，先上效果图：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物Polygon，百度地图和谷歌地图都有同样的Polygon类。

百度地图的API相关Polygon文档在这里：http://dev.baidu.com/wiki/map/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/Polygon

谷歌地图API相关Polygon文档在这里：https://developers.google.com/maps/documentation/javascript/reference#Polygon

先讲讲在百度地图中如何实现，

1.创建百度地图

    var map = new BMap.Map("container");
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
    }));
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();

2.获取各省的边界坐标

首先定义一个中国各省名称和颜色的数组provinces，里面的颜色是从网上找的一张中国地图用颜色拾取器获得的。

var provinces = ["广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7",

        "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3",
        "河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB", "辽宁-#FCFBBB",
        "新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC",
        "内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3",
        "北京-#FBC5DC", "天津-#C8C1E3", "三河市-#E7CCAF", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3"
    ];

然后逐个获取各省的边界坐标并在地图上用不同颜色描绘出来

function getBoundary(province) {
    var boundary = new BMap.Boundary();
    boundary.get(name, function(rs){ 
     //一个省可能有好几个闭合的多边形区域
     for (var i = 0; i < rs.boundaries.length; i++) {
     //.......
     //.......
     }    
    });  
} 
//逐个显示
for (var i = provinces.length - 1; i >= 0; i--) {
    getBoundary(provinces[i]);
}

3.给polygon添加监听,现实鼠标移动到某省上面闪烁高亮显示

//开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了

polygon.addEventListener("click", function (e) {
    var latlng = e.point;
    var info = new BMap.InfoWindow(name + " " + latlng.lat + "," + latlng.lng, {width:220});
    map.openInfoWindow(info, latlng);

    //高亮闪烁显示鼠标点击的省
    delay = 0;
    for (flashTimes = 0; flashTimes < 3; flashTimes++) {
        delay += 200;
        setTimeout(function () {
            polygon.setFillColor("#FFFF00");
        }, delay);

        delay += 200;
        setTimeout(function () {
            polygon.setFillColor(color);
        }, delay);
    }
});

点击某省用黄色高亮显示，还闪烁几下。

完整实例程序：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>获取地区轮廓线</title>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=htAek3gQ49uDIy66ZXxQB5VZV2NtctNi"></script>
        <style type="text/css">
            body {
                font-size: 13px;
                margin: 10px
            }
            #container {
                width: 1200px;
                height: 650px;
                border: 1px solid gray
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/javascript">
            if(typeof console == "undefined") {
                window.console = {
                    log: function() {}
                };
            }
            var map = new BMap.Map("container");
            map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
            var stdMapCtrl = new BMap.NavigationControl({
                type: BMAP_NAVIGATION_CONTROL_SMALL
            })
            map.addControl(stdMapCtrl);
            map.enableScrollWheelZoom();
            map.enableContinuousZoom();
            function getBoundary(data) {
                var bdary = new BMap.Boundary();
                bdary.get(data.split("-")[0], function(rs) {                    
                    var maxNum = -1,maxPly;
                    var color = data.split("-")[1];
                    var count = rs.boundaries.length;
                    for(var i = 0; i < count; i++) {
                        var ply = new BMap.Polygon(rs.boundaries[i], {
                            strokeWeight: 1,
                            strokeOpacity: 0.5,
                            fillColor: color,
                            strokeColor: "#000000"
                        });
                        map.addOverlay(ply);                    
                        //开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
                        ply.addEventListener("click", function(e) {
                            var latlng = e.point;
                            var info = new BMap.InfoWindow(name + " " + latlng.lat + "," + latlng.lng, {
                                width: 220
                            });
                            map.openInfoWindow(info, latlng);

                            //高亮闪烁显示鼠标点击的省
                            delay = 0;
                            for(flashTimes = 0; flashTimes < 3; flashTimes++) {
                                delay += 200;
                                setTimeout(function() {
                                    ply.setFillColor("#FFFF00");
                                }, delay);

                                delay += 200;
                                setTimeout(function() {
                                    ply.setFillColor(color);
                                }, delay);
                            }
                        });
                    }
                    if(maxPly) {
                        map.setViewport(maxPly.getPoints());
                    }
                });
            }
            map.clearOverlays();       
            var datas = [
                "广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7",
                "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3",
                "河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB","辽宁-#FCFBBB",
                "新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC",
                "内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3",
                "北京-#FBC5DC", "天津-#C8C1E3", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3"
            ];
            for(var i = 0; i < datas.length; i++) {
                getBoundary(datas[i]);
            }
        </script>
    </body>
</html>

4.收工了，在谷歌地图中的实现方法，请听下回分解。

刚花了几分钟在谷歌地图中实现同样的效果，是不是很8错！

代码如下:

  1 <html xmlns="http://www.w3.org/1999/xhtml">
  2   
  3   <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>在谷歌地图中高亮显示各省</title>
  6     <style type="text/css">
  7       body {
  8         margin: 0;
  9         border: 0;
 10         overflow: hidden;
 11       }
 12       #map_canvas {
 13         width: 100%;
 14         height: 100%;
 15         position: absolute;
 16       }
 17     </style>
 18     <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></script>
 19     <script type="text/javascript" src="citydata.json"></script>
 20     <script>
 21       var map = null;
 22       var provinces = ["广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7", "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3", "河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB", "辽宁-#FCFBBB", "新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC", "内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3", "北京-#FBC5DC", "天津-#C8C1E3", "三河市-#E7CCAF", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3", "台湾-#C8C1E3"];
 23 
 24       var polyOptions = {
 25         strokeColor: "#9B868B",
 26         fillColor: "#FF8C69",
 27         fillOpacity: 0.6,
 28         strokeWeight: 1,
 29         zIndex: 1
 30       };
 31 
 32         function initialize() {
 33           var myOptions = {
 34             center: new google.maps.LatLng(32.694866, 105.996094),
 35             zoom: 4,
 36             mapTypeId: google.maps.MapTypeId.ROADMAP,
 37             streetViewControl: false
 38           };
 39           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 40 
 41           // 普通省
 42           for (var i = 0, n = cityData.provinces.length; i < n; i++) {
 43             showBoundaryEx(cityData.provinces[i].b, getColor(cityData.provinces[i].n));
 44             //市
 45             // for (var j = 0, m = cityData.provinces[i].cities.length; j < m; j++) {
 46             //     showBoundary(cityData.provinces[i].cities[j].b);
 47             // }
 48           }
 49           //直辖市 
 50           for (var i = 0, n = cityData.municipalities.length; i < n; i++) {
 51             showBoundaryEx(cityData.municipalities[i].b, getColor(cityData.municipalities[i].n));
 52           }
 53           //港澳台
 54           for (var i = 0, n = cityData.other.length; i < n; i++) {
 55             showBoundaryEx(cityData.other[i].b, getColor(cityData.other[i].n));
 56           }
 57         }
 58 
 59         function isFloatNumber(value) {
 60           return (!isNaN(value));
 61         }
 62 
 63         function getColor(name) {
 64           for (var m = provinces.length - 1; m >= 0; m--) {
 65             if (provinces[m].indexOf(name) > -1) {
 66               var arr = provinces[m].split("-");
 67               return arr[1];
 68             }
 69           }
 70         }
 71 
 72         function showBoundaryEx(latLngs, color) {
 73           var paths = [],
 74             latLng = "",
 75             list = latLngs.split(";");
 76           for (i = list.length - 1; i >= 0; i--) {
 77             latLng = list[i].split(",");
 78             var lat = latLng[1],
 79               lng = latLng[0];
 80             if ((isFloatNumber(lat)) && (isFloatNumber(lng))) {
 81               paths.push(new google.maps.LatLng(lat, lng));
 82             }
 83           }
 85           var polygon = new google.maps.Polygon();
 86           polygon.setOptions(polyOptions);
 87           polygon.setOptions({
 88             fillColor: color
 89           });
 90           polygon.setPaths(paths);
 91           polygon.setMap(map);
 92 
 93           google.maps.event.addListener(polygon, "mousemove",
 94 
 95           function () {
 96             polygon.setOptions({
 97               fillColor: "#FFFF00"
 98             });
 99           });
100 
101           google.maps.event.addListener(polygon, "mouseout",
102 
103           function () {
104             polygon.setOptions({
105               fillColor: color
106             });
107           });
108         }
110       google.maps.event.addDomListener(window, "load", initialize);
111     </script>
112   </head>
114   <body>
115     <div id="map_canvas"></div>
116   </body>
118 </html>

PS: citydata.json 这个文件是百度的MapLibrary里面的城市列表（http://api.map.baidu.com/library/CityList/1.2/src/data/CityData.js）, 我把省市的边界坐标也存到里面了。

经测试发现，在百度地图中，鼠标比较快速的连续移过几个省，发现几个省都是高亮的，而谷歌的则表现良好，没有延时的现象。由此可以看出，百度地图性能不及谷歌。

中国县区以上行政区划经纬度坐标.zip

作者： i-gps
出处： http://www.cnblogs.com/i-gps/
欢迎探讨交流Google Maps相关技术，QQ:64445322 QQ群：242284018
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。