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

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

   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!

相关文章
|
搜索推荐 定位技术
百度地图开发mapStyle个性化地图styleJson的配色解决方案
百度地图开发mapStyle个性化地图styleJson的配色解决方案
641 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
924 0
|
9天前
|
XML 搜索推荐 定位技术
向百度提交网站地图Sitemap
我知道可以通过Google 网站管理员工具向 Google 提交网站地图 Sitemap,那么我如何向百度、雅虎等其他搜索引擎提交呢?我是否需要制作一个类似 Google Sitemap 一样的 baidu Sitemap 呢?
11 1
|
3月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
63 0
|
移动开发 JavaScript 定位技术
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
百度地图开发:地图调起API(Web端)使用终点经纬度直接调用百度地图导航信息的解决方案
350 0
|
6月前
|
IDE 定位技术 开发工具
百度地图如何创建一个属于自己的地图,附加到项目中?
百度地图如何创建一个属于自己的地图,附加到项目中?
112 0
|
定位技术
百度地图使用 ->展示地图一
百度地图使用 ->展示地图一
93 0
|
搜索推荐 数据可视化 JavaScript
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
205 1
|
定位技术
百度地图开发(8):地图覆盖物实现纵横交错的交通网络
百度地图开发(8):地图覆盖物实现纵横交错的交通网络
45 0
百度地图开发(8):地图覆盖物实现纵横交错的交通网络
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
534 0
下一篇
无影云桌面