最近有朋友需要在百度地图中给各省按不同颜色显示，先上效果图：
原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物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">
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"];
24 var polyOptions = {
25 strokeColor: "#9B868B",
26 fillColor: "#FF8C69",
27 fillOpacity: 0.6,
28 strokeWeight: 1,
29 zIndex: 1
30 };
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);
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 }
59 function isFloatNumber(value) {
60 return (!isNaN(value));
61 }
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 }
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);
93 google.maps.event.addListener(polygon, "mousemove",
95 function () {
96 polygon.setOptions({
97 fillColor: "#FFFF00"
98 });
99 });
101 google.maps.event.addListener(polygon, "mouseout",
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
