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

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

   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);
        });
    }


Done!

相关文章
|
8月前
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
11天前
echars 设置文字倾斜 图表根据鼠标滑轮自动改变x轴数据
echars 设置文字倾斜 图表根据鼠标滑轮自动改变x轴数据
11 1
|
10月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
188 0
|
5月前
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
【sgDragMove】自定义组件:自定义拖拽组件,仅支持拖拽、设置吸附屏幕边界距离。
|
5月前
|
测试技术
【sgTileImage】自定义组件:瓦片图拖拽局部加载、实现以鼠标为中心缩放
【sgTileImage】自定义组件:瓦片图拖拽局部加载、实现以鼠标为中心缩放
|
5月前
|
测试技术 定位技术
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
|
10月前
|
定位技术
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
echarts. registerMap选项specialAreas将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看
70 0
|
10月前
|
前端开发 定位技术
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
百度地图开发自定义信息窗口openInfoWindow样式的解决方案
813 0
|
10月前
|
前端开发 定位技术
百度地图标注提示框CSS气泡对话框实现属性解决方案
百度地图标注提示框CSS气泡对话框实现属性解决方案
80 0

热门文章

最新文章