在百度地图或谷歌地图给中国各省着色并高亮显示 |
您所在的位置：网站首页 › 百度地图显示边界线什么意思 › 在百度地图或谷歌地图给中国各省着色并高亮显示 |
在百度地图或谷歌地图给中国各省着色并高亮显示
|
最近有朋友需要在百度地图中给各省按不同颜色显示，先上效果图：
原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物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 2 3 4 5 在谷歌地图中高亮显示各省 6 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 18 19 20 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 = 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 112 113 114 115 116 117 118 PS: citydata.json 这个文件是百度的MapLibrary里面的城市列表（http://api.map.baidu.com/library/CityList/1.2/src/data/CityData.js）, 我把省市的边界坐标也存到里面了。经测试发现，在百度地图中，鼠标比较快速的连续移过几个省，发现几个省都是高亮的，而谷歌的则表现良好，没有延时的现象。由此可以看出，百度地图性能不及谷歌。 中国县区以上行政区划经纬度坐标.zip |
【本文地址】