百度地图：监听地图缩放自动显示和隐藏的富文本标签

漏刻有时 2021-01-23 21:42:12

分类专栏：地图开发

本文链接：https://blog.csdn.net/weixin_41290949/article/details/113062782

版权

在这里插入图片描述

   var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(121.554586, 29.813444), 12);
    map.enableScrollWheelZoom();
    map.setMapStyle({style: 'grayscale'})

    //JSON数据接口;
    var markerArr = [
        {title: "商会", point: "121.554586,29.813444", id: "1", value: "14"},
        {title: "机场", point: "121.472724,29.823098", id: "2", value: "16"},
        {title: "邱隘", point: "121.734311,29.833625", id: "3", value: "19"}
    ];

    //调用富文本标签;
    getRichMaker(markerArr);


    //循环数据接口;
    function getRichMaker(markerArr) {
        for (var i = 0; i < markerArr.length; i++) {
            var title = markerArr[i].title;
            var id = markerArr[i].id;
            var value = markerArr[i].value;
            var point = markerArr[i].point;
            //添加富文本标签;
            addRichMaker(title, id, value, point);
        }
    }

    //富文本标签函数封装;
    function addRichMaker(title, id, value, point) {
        var richHtml = '<div class="richborder" id="richborder"' + id + '><span class="rich_text">' + title + '</span><span class="rich_number">' + value + '个</span></div>',
                myRichMarker = new BMapLib.RichMarker(richHtml, new BMap.Point(point.split(",")[0], point.split(",")[1]), {
                    "anchor": new BMap.Size(-18, -27),
                    "enableDragging": false//是否可以拖动
                });
        map.addOverlay(myRichMarker);

        //单击标注事件;
        myRichMarker.addEventListener("click", function () {
            getBoundary("宁波市鄞州区");
        });
    }


    //监听地图缩放事件;
    map.addEventListener("zoomend", function () {
        var level = this.getZoom();
        if (level >= 12) {
            map.clearOverlays();
        } else {
            getRichMaker(markerArr);
        }
    });

    /*获取行政区域边界
     * 1.仅支持省市县级别的边界读取，不支持乡镇级别;
     * 2.读取的是以百度地图API的边界数据，BD-09坐标系；
     * */
    function getBoundary(city_name) {
        //map.clearOverlays();
        var bdary = new BMap.Boundary();
        bdary.get(city_name, function (rs) {
            var count = rs.boundaries.length;
            if (count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            //目标行政区划遮罩层；
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {
                    strokeWeight: 3,
                    strokeColor: "#FF0033",
                    fillOpacity: "1",
                    fillColor: ""
                }); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
            //map.setViewport(pointArray);
        });
    }