使用google或百度地图API绘制特定高亮区域 百度地图api 绘制区域

最近有朋友需要在百度地图中给各省按不同颜色显示,先上效果图:

原理就是获取各省的边界坐标,然后在地图上面用不颜色的覆盖物Polygon,百度地图和谷歌地图都有同样的Polygon类。

百度地图的API相关Polygon文档在这里:http://dev.baidu.com/wiki/map/index.php?title=Class:覆盖物类/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);    }});
使用google或百度地图API绘制特定高亮区域 百度地图api 绘制区域

点击某省用黄色高亮显示,还闪烁几下。

4.收工了,在谷歌地图中的实现方法,请听下回分解。

刚花了几分钟在谷歌地图中实现同样的效果,是不是很8错!

代码如下:

  1 <</span>html xmlns="http://www.w3.org/1999/xhtml">  2     3   <</span>head>  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> 18     <</span>script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN"></</span>script> 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 = { 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.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))) { 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: color106             });107           });108         }109 110       google.maps.event.addDomListener(window, "load", initialize);111     </</span>script>112   </</span>head>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), 我把省市的边界坐标也存到里面了。

经测试发现,在百度地图中,鼠标比较快速的连续移过几个省,发现几个省都是高亮的,而谷歌的则表现良好,没有延时的现象。由此可以看出,百度地图性能不及谷歌。

  

爱华网本文地址 » http://www.413yy.cn/a/25101012/120480.html

更多阅读

如何将视频旋转90度或180度? 怎么把视频旋转180度

如何将视频旋转90度或180度?——简介如何将视频旋转?利用摄像机拍摄视频短片,有时就是会把相机旋转来进行拍摄,尤其是一些专业的摄影师,更是高要求。在拍摄的视频之后,播放时有的画面就会出现倒转或者翻转状态。那么这时我们就要使用视频

如何使用百度输入法PC版使用语音输入 百度语音输入法pc版

如何使用百度输入法PC版使用语音输入——简介大家在手机上玩微信一定已经习惯了使用语音了吧,而且手机的输入法一般都带有语音输入,虽然不能发送接收语音,但是通过语音转汉字也会方便不少,今天小编就告诉您如何使用百度输入法的语音插件

Google 比百度强在哪里呢? google总部在哪里

是啊,墙在哪里呢?【李焕林的回答(18票)】:==================补充===============================我回来看看这题目,我说的都好像离题了。谷歌比百度强,是建立在非中华地区。在国内,无疑是失败的。谷歌比百度强在对广告的处理,更让用户满

google不能使用 google earth不能使用

最近几天,Google.com几乎完全无法使用,搜索、Calendar、IG等我常用的Google服务全部瘫痪,甚至用代理也没有效果。Gmail和Talk也经常上不去,以前只是不能使用Google的搜索服务,现在的情况变的更糟,从昨天开始,越来越愤怒和恐慌,Gmail如果

声明:《使用google或百度地图API绘制特定高亮区域 百度地图api 绘制区域》为网友闪现撞墙分享!如侵犯到您的合法权益请联系我们删除