使用google或百度地图API绘制特定高亮区域

原帖地址：

http://blog.sina.com.cn/s/blog_63f3e0060101d68h.html

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

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

百度地图的API相关Polygon文档在这里：http://dev.baidu.com/wiki/map/index.php?title=Class:覆盖物类/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);
    }
});

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

 

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

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

代码如下:

  1 <</span>html xmlns="http://www.w3.org/1999/xhtml">
  2   
  3   <</span>head>
  4     <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <</span>title>在谷歌地图中高亮显示各省</</span>title>
 6     <</span>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 </</span>style>  18 <</span>script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></</span>script>  19 <</span>script type="text/javascript" src="citydata.json"></</span>script>  20 <</span>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.getElementByIdx_x("map_canvas"), myOptions);  40  41 // 普通省  42 for (var i = 0, n = cityData.provinces.length; i <</span> 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 <</span> 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 <</span> 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  }  84  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  } 109 110  google.maps.event.addDomListener(window, "load", initialize); 111 </</span>script> 112 </</span>head> 113 114 <</span>body> 115 <</span>div id="map_canvas"></</span>div> 116 </</span>body> 117 118 </</span>html>

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



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