百度地图 ( 二 ) 添加覆盖物_春哥的魔法书

大大的周 02-07 5182

3.增加覆盖物

有如下几种覆盖物：

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。Marker：标注表示地图上的点，可自定义标注的图标。Label：表示地图上的文本标注，您可以自定义标注的文本内容。Polyline：表示地图上的折线。Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。Circle : 表示地图上的圆。InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。

3.1.添加标注 Marker

显示多个标注点, 自定义icon

添加圆形覆盖物 , point 是圆心的坐标 , 5000 是半径

// 创建圆形覆盖物 var circle = new BMap.Circle(point, 5000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆 map.addOverlay(circle); 3.2.1.在查询到的点上添加圆形覆盖物

先在html中添加半径输入框

范围:<input type="number" name="signonRadio" value="300">

添加后如下:

地名:<input type="text" name="modalAddr"> 范围:<input type="number" name="signonRadio" value="300"> <input type="button" value="查询" onclick="searchByStationName()"> 经度:<input name="acLng" type="text"> 纬度:<input name="acLat" type="text"> <div id="allmap"></div>

在查询代码中创建圆形覆盖物, 代码如下 :

// 得到圆形覆盖物半径 var radio = $("input[name='signonRadio']").val(); // 创建圆形覆盖物 var circle = new BMap.Circle(new BMap.Point(poi.point.lng, poi.point.lat), radio, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); // 标注绑定拖拽事件 marker.addEventListener("dragging", function (msg) { //设置圆形覆盖物圆心随标注拖拽而与标注同时移动 circle.setCenter(msg.point); $("input[name='acLng']").val(msg.point.lng); $("input[name='acLat']").val(msg.point.lat); }); // 显示覆盖物 map.addOverlay(marker); // 显示圆形覆盖物 map.addOverlay(circle); 3.3.地区范围

按坐标点作为顶点生成任意形状的覆盖物

// 定义范围的经纬度 var range = "116.449562,39.926373; 116.409562,40.026373; 116.549562,40.076373; 116.699562,40.026373; 116.649562,39.926373;" // 创建自定义覆盖物 var polygon = new BMap.Polygon(range, { strokeWeight: 2, strokeColor: "#ff0000", strokeOpacity:0, fillColor:"#fff", fillOpacity:"0.8" }); // 显示自定义覆盖物 map.addOverlay(polygon); 3.3.1.根据地址生成反向覆盖物

将北京市以外的地区覆盖上半透明效果

$(function () { map = new BMap.Map("allmap"); // var point = new BMap.Point(116.449562,39.926373); map.centerAndZoom("北京市", 12); map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件 map.addControl(new BMap.ScaleControl()); //比例尺 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件 map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开缩略地图 map.addControl(new BMap.MapTypeControl()); //地图类型三维方式有错误 var bdary = new BMap.Boundary(); // 边界 bdary.get("北京市", function(rs){ //获取行政区域 map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return ; } var strs = new Array(); strs = rs.boundaries[0].split(";");//！！！！这里只适用于rs.boundaries.length=1的省市（如北京等） var ENWS = ""; for (var i=0;i<strs.length;i++) { ENWS += strs[i] + ";" } // 自定义[外围]边框点的集合 var EN_JW = "180, 90;";//东北角 var NW_JW = "-180, 90;";//西北角 var WS_JW = "-180, -90;";//西南角 var SE_JW = "180, -90;";//东南角 // 添加遮罩层 var ply1 = new BMap.Polygon(ENWS + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor:"none",strokeOpacity:0,fillColor:"#fff",fillOpacity:"0.8" }); //建立多边形覆盖物 map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层 // 选中区域的边框 var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillColor:""}); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //调整视野 }); })