最近有朋友需要在百度地图中给各省按不同颜色显示,先上效果图:
原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物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错!