标签:
这两天在实验百度地图的api,老实说做的还蛮好使的,不过我这需要的行政区选择和反选功能还是不怎么好实现,实践了一下总算找到了一个比较好一点的解决办法。
行政区选择其实没啥好说的,就是直接拿出行政区名字来调用BMap.Boundary().get(districtName,callback)就可以了
反选尤其是不确定多少个行政区时候的反选才是个麻烦。
我自己选择的方式是找出咱国家四个角端点的经纬度,然后以此画一个闭合折线,再连接选中的区域,再连接四角端点,依次类推
优点是省事&节省资源(我懒_(:з」∠)_)
缺点是不能开描边,不然你就会看到一堆额外的连向西北(左上)的线。
具体代码直接扔到下面了(包括选区&绑定事件&画屏蔽层)
第一次写写的有点乱……反正也是拿来当备忘的所以随意了。
另外有一点想吐槽的……为啥设透明度为0的话无效呢
源码:
//百度地图api var map = new BMap.Map("container", { enableMapClick: false }); // 创建地图实例,禁止点击地图底图 //设置样式 map.setMapStyle({ styleJson: [ {//不显示点信息 "featureType": "poi", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } } ] }); map.disableDragging();//禁止拖动 map.disableDoubleClickZoom();//禁止双击缩放 var blist = []; var districtLoading = 0; function getBoundary() { addDistrict("市北区"); addDistrict("市南区"); addDistrict("李沧区"); addDistrict("四方区"); } /** * 添加行政区划 * @param {} districtName 行政区划名 * @returns 无返回值 */ function addDistrict(districtName) { //使用计数器来控制加载过程 districtLoading++; var bdary = new BMap.Boundary(); bdary.get(districtName, function (rs) { //获取行政区域 var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { alert(‘未能获取当前输入行政区域‘); return; } for (var i = 0; i < count; i++) { blist.push({ points: rs.boundaries[i], name: districtName }); }; //加载完成区域点后计数器-1 districtLoading--; if (districtLoading == 0) { //全加载完成后画端点 drawBoundary(); } }); } /** * 各种鼠标事件绑定 */ function click(evt) { alert(evt.target.name); } function mouseover(evt) { evt.target.label.setZIndex(99); evt.target.label.setPosition(evt.point); evt.target.label.show(); } function mousemove(evt) { evt.target.label.setPosition(evt.point); } function mouseout(evt) { evt.target.label.hide(); } function drawBoundary() { var pointArray = []; //画遮蔽层 //定义中国东南西北端点,作为第一层 var pNW = { lat: 53.0, lng: 73.0 } var pNE = { lat: 53.0, lng: 136.0 } var pSE = { lat: 3.0, lng: 136.0 } var pSW = { lat: 3.0, lng: 73.0 } var pArray = []; pArray.push(pNW); pArray.push(pSW); pArray.push(pSE); pArray.push(pNE); pArray.push(pNW); for (var i = 0; i < blist.length; i++) { //添加显示用标签层 var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) }); label.hide(); map.addOverlay(label); //添加多边形层 var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#000000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物 ply.name = blist[i].name; ply.label = label; ply.addEventListener("click", click); ply.addEventListener("mouseover", mouseover); ply.addEventListener("mouseout", mouseout); ply.addEventListener("mousemove", mousemove); map.addOverlay(ply); //添加名称标签层 var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) }); centerlabel.setPosition(ply.getBounds().getCenter()); map.addOverlay(centerlabel); //将点增加到视野范围内 pointArray = pointArray.concat(ply.getPath()); pArray = pArray.concat(ply.getPath()); pArray.push(ply.getPath()[0]); pArray.push(pNW); pArray.push(pSW); pArray.push(pSE); pArray.push(pNE); pArray.push(pNW); } map.setViewport(pointArray); //调整视野 //添加遮蔽层 var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#000000" ,fillOpacity: 0.8}); //建立多边形覆盖物 map.addOverlay(plyall); } setTimeout(function () { getBoundary(); }, 100);
百度地图api-在中国范围内的多行政区选择与反选(增加屏蔽层)
标签:
原文地址:http://www.cnblogs.com/wondergx/p/5305602.html