最近有朋友需要在百度地图中给各省按不同颜色显示，先上效果图：
原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物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); } });
点击某省用黄色高亮显示，还闪烁几下。
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 } 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 script> 112 head> 113 114 <body> 115 <div id="map_canvas">div> 116 body> 117 118 html>
PS: citydata.json 这个文件是百度的MapLibrary里面的城市列表（http://api.map.baidu.com/library/CityList/1.2/src/data/CityData.js）, 我把省市的边界坐标也存到里面了。
经测试发现，在百度地图中，鼠标比较快速的连续移过几个省，发现几个省都是高亮的，而谷歌的则表现良好，没有延时的现象。由此可以看出，百度地图性能不及谷歌。
中国县区以上行政区划经纬度坐标.zip