1500字范文 > 百度地图 ( 二 ) 添加覆盖物

百度地图 ( 二 ) 添加覆盖物

时间：2020-12-03 03:24:48

相关推荐

百度地图 ( 二 ) 添加覆盖物

3.增加覆盖物

有如下几种覆盖物：

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

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

3.1.添加标注 Marker

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

3.2.圆形Circle

添加圆形覆盖物 , 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()); //地图类型三维方式有错误// 调用生成遮罩的函数rangeMap("北京市");})function rangeMap( area ) {var bdary = new BMap.Boundary(); // 边界bdary.get(area, function(rs){ //获取行政区域console.log( "rs:", rs )map.clearOverlays(); //清除地图覆盖物var count = rs.boundaries.length; //行政区域的点有多少个console.log( "count:", count)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); //调整视野});console.log("bdary: ",bdary)}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。