最近有朋友需要在百度地图中给各省按不同颜⾊显⽰，先上效果图：
原理就是获取各省的边界坐标，然后在地图上⾯⽤不颜⾊的覆盖物Polygon，百度地图和⾕歌地图都有同样的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());
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();
<(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="/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="le/maps/api/js?sensor=false&language=zh-CN"></script>
19<script type="text/javascript" src="citydata.json"></script>
20<script>
21var map = null;
22var provinces = ["⼴西-#C8C1E3", "⼴东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7", "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3", "河南-#DBECC8", "江苏-#DBECC8 23
24var polyOptions = {
25 strokeColor: "#9B868B",
26 fillColor: "#FF8C69",
27 fillOpacity: 0.6,
28 strokeWeight: 1,
29 zIndex: 1
30 };
31
32function initialize() {
33var 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.ElementById("map_canvas"), myOptions);
40
41// 普通省
42for (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//直辖市
50for (var i = 0, n = cityData.municipalities.length; i < n; i++) {
51 showBoundaryEx(cityData.municipalities[i].b, getColor(cityData.municipalities[i].n));
52 }
53//港澳台
54for (var i = 0, n = her.length; i < n; i++) {
55 her[i].b, her[i].n));
56 }
57 }
58
zhengzhoudaxue
59function isFloatNumber(value) {
60return (!isNaN(value));
人工进化61 }
62
63function getColor(name) {
64for (var m = provinces.length - 1; m >= 0; m--) {
65if (provinces[m].indexOf(name) > -1) {
66var arr = provinces[m].split("-");
67return arr[1];
68 }
69 }
70 }
新标准英语第七册71
72function showBoundaryEx(latLngs, color) {
73var paths = [],
74 latLng = "",
75 list = latLngs.split(";");
76for (i = list.length - 1; i >= 0; i--) {
77 latLng = list[i].split(",");
78var lat = latLng[1],
79 lng = latLng[0];
80if ((isFloatNumber(lat)) && (isFloatNumber(lng))) {
81 paths.push(new google.maps.LatLng(lat, lng));
82 }
83 }
84
85var 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
95function () {
96 polygon.setOptions({
97 fillColor: "#FFFF00"
98 });
99 });
100
101 google.maps.event.addListener(polygon, "mouseout",
102
103function () {
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
白细胞介素4118</html>
PS: 这个⽂件是百度的MapLibrary⾥⾯的城市列表（api.map.baidu/library/CityList/1.2/src/data/CityData.js）, 我把省市的边界坐标也存到⾥⾯了。
经测试发现，在百度地图中，⿏标⽐较快速的连续移过⼏个省，发现⼏个省都是⾼亮的，⽽⾕歌的则表现良好，没有延时的现象。由此可以看出，百度地图性能不及⾕歌。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议