1801人阅读 评论(0)

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

1.创建百度地图

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


2.获取各省的边界坐标

    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了
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.收工了，在谷歌地图中的实现方法，请听下回分解。

  1 <</span>html xmlns="http://www.w3.org/1999/xhtml">
2
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>
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 = {
35             zoom: 4,
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))) {
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
94
95           function () {
96             polygon.setOptions({
97               fillColor: "#FFFF00"
98             });
99           });
100
102
103           function () {
104             polygon.setOptions({
105               fillColor: color
106             });
107           });
108         }
109
111     </</span>script>
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）, 我把省市的边界坐标也存到里面了。



0
0

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
个人资料
• 访问：76902次
• 积分：1190
• 等级：
• 排名：千里之外
• 原创：31篇
• 转载：73篇
• 译文：0篇
• 评论：5条
阅读排行
评论排行
最新评论