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

春哥的魔法书

已于 2022-12-14 17:20:19 修改

阅读量3.7k

点赞数

分类专栏： javascript 文章标签：百度地图 JavaScript

于 2022-12-12 17:45:29 首次发布

本文链接：https://blog.csdn.net/yuanchun05/article/details/128290642

版权

javascript 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

3.增加覆盖物

有如下几种覆盖物：

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

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

3.1.添加标注 Marker

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

var spList = [
    {
        spLongitude:116.26165756693067,
        spLatitude:40.038813377487905,
        spName:"图标A",
        spId:"tagA"
    },
    {
        spLongitude:116.10819372972905,
        spLatitude:40.00842014047728,
        spName:"图标B",
        spId:"tagB"
    }
]

$(function () {
    map = new BMap.Map("allmap");

    var point = new BMap.Point(116.449562,39.926373);
    map.centerAndZoom(point, 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());        //地图类型 三维方式 有错误


    // 增加标记点
    for (var i = 0; i < spList.length; i++) {
        var lng = spList[i].spLongitude;
        var lat = spList[i].spLatitude;
        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png"  //标注图片
                     	, new BMap.Size(23, 25)  // 图片大小
                        , { offset: new BMap.Size(10, 30), imageOffset: new BMap.Size(0,0-i*25)});   //偏移
        // 创建标注，为要查询的地方对应的经纬度
        var marker = new BMap.Marker(new BMap.Point(lng, lat)
                                     , { title: spList[i].spName, icon: myIcon });
        //点可拖拽
        marker.enableDragging();
        // 标注 跳动
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        map.addOverlay(marker);

        (function () {
            var shop = spList[i];
            marker.addEventListener("dragend", function () {
                //拖拽释放事件
                updatePosition(this, shop);
            });
            marker.addEventListener("click", function () {
                // 点击事件
                updateShop(shop);
            });
        })();
    }
})


//拖拽释放事件
function updatePosition(marker, shop) {
    alert(shop.spId)
    alert(marker.getPosition().lng)
    alert(marker.getPosition().lat)

}

//更新商铺信息
function updateShop(shop) {
    alert(shop.spId)
}

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> <!--地图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)

}