android地图遮罩,百度地图api高亮显示指定区域，其余遮罩

1 //创建地图实例

2 var map = new BMap.Map("myMap",{enableMapClick: false});3 //以四川省为地图中心，显示层级为13

4 map.centerAndZoom("四川省", 13);5 //允许滚动鼠标缩放地图

6 map.enableScrollWheelZoom(true);7 setTimeout(function() {8 map.enableDragging(); //两秒后开启拖拽

9 }, 2000);10 var index = 0;11 var myGeo = newBMap.Geocoder();12 //需要批量解析显示的地址

13 var adds =[14 "煎茶镇",15 "新兴镇",16 "永安镇",17 "白家沟",18 "正兴镇",19 "万安镇",20 "南湖湿地公园"

21 ];22 var blist =[];23 var districtLoading = 0;24

25 functiongetBoundary() {26 //设置指定显示区域双流、龙泉驿

27 addDistrict("成都市双流区");28 addDistrict("成都市龙泉驿区");29 }30

31 functionaddDistrict(districtName) {32 //使用计数器来控制加载过程

33 districtLoading++;34 var bdary = newBMap.Boundary();35 bdary.get(districtName, function(rs) { //获取行政区域

36 var count = rs.boundaries.length; //行政区域的点有多少个

37 if(count === 0) {38 alert('未能获取当前输入行政区域');39 return;40 }41 for(var i = 0; i < count; i++) {42 blist.push({ points: rs.boundaries[i], name: districtName });43 };44 //加载完成区域点后计数器-1

45 districtLoading--;46 if(districtLoading == 0) {47 //全加载完成后画端点

48 drawBoundary();49 }50 });51 }52

53 functiondrawBoundary() {54 //包含所有区域的点数组

55 var pointArray =[];56

57 /*画遮蔽层的相关方法58 *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。59 * 这样就做出了一个经过多次西北角的闭合多边形*/

60 //定义中国东南西北端点，作为第一层

61 var pNW = { lat: 59.0, lng: 73.0}62 var pNE = { lat: 59.0, lng: 136.0}63 var pSE = { lat: 3.0, lng: 136.0}64 var pSW = { lat: 3.0, lng: 73.0}65 //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点

66 var pArray =[];67 pArray.push(pNW);68 pArray.push(pSW);69 pArray.push(pSE);70 pArray.push(pNE);71 pArray.push(pNW);72 //循环添加各闭合区域

73 for(var i = 0; i < blist.length; i++) {74 //添加显示用标签层

75 var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });76 label.hide();77 map.addOverlay(label);78

79 //添加多边形层并显示

80 var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#5185E6", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物

81 ply.name =blist[i].name;82 ply.label =label;83 map.addOverlay(ply);84

85 //将点增加到视野范围内

86 var path =ply.getPath();87 pointArray =pointArray.concat(path);88 //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点

89 pArray =pArray.concat(path);90 pArray.push(pArray[0]);91 }92

93 //限定显示区域，需要引用api库

94 var boundply = newBMap.Polygon(pointArray);95 BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());96 map.setViewport(pointArray); //调整视野

97

98 //添加遮蔽层(描边线条，遮罩层颜色)

99 var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#fff", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 1 }); //建立多边形覆盖物

100 map.addOverlay(plyall);101 }102

103 functionbdGEO() {104 var add =adds[index];105 geocodeSearch(add);106 index++;107 }108 getBoundary();109 functiongeocodeSearch(add) {110 if(index

121 functionaddMarker(point, label) {122 //使用自定义图标做标注点，宽高为8 10

123 var myIcon = new BMap.Icon("marker_red_sprite2.png", new BMap.Size(8, 10));124 var marker = newBMap.Marker(point,{icon: myIcon});125 map.addOverlay(marker);126 marker.setLabel(label);127 label.setStyle({128 display:"none"

129 })130 marker.addEventListener("mouseover",function(e){131 var label = this.getLabel();132 //设置label的样式，这里没有过多要求，能显示出来就行

133 label.setStyle({134 display:"block",135 borderRadius:"2px",136 border:"1px solid #5185E6",137 padding:"2px 4px"

138 })139 });140 marker.addEventListener("mouseout",function(e){141 var label = this.getLabel();142 label.setStyle({143 display:"none"

144 })145 });146 }147 bdGEO();