漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关

1. 漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案
2. 漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关
3. 漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标
4. 漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解决方案
5. 漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案
6. 漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
7. 漏刻有时百度地图API实战开发(7)JavaScript开源库几何运算判断点是否在多边形内（电子围栏）
8. 漏刻有时百度地图API实战开发(8)圆形区域周边搜索地图监听事件(覆盖物重叠显示层级\图像标注监听事件、setZIndex和setTop方法)
   

项目说明

在百度地图开发的过程中，如果遇见大数据量POI标注展示或在最佳视野展示时，没有文本标签，会不清楚具体标注的代表的意义；如果同时显示大量的文本标签，又会导致界面杂乱且无法清晰查看，因此，需要做切换开关。

核心代码

1.HTML代码

    <div class="lock_sub"><i class="layui-icon layui-icon-cols" id="textTitle" data-switch="on">i><p>开关p>div>

1
2

2.javascript代码

    //开关
    $("#textTitle").click(function () {
        var textTitle = $("#textTitle").data("switch");
        console.log(textTitle);
        if (textTitle === "on") {
            $('#textTitle').data('switch', 'off');//改变属性
            getMarker(markerArr, 0);
        } else {
            $('#textTitle').data('switch', 'on');//还原属性
            getMarker(markerArr, 1);
        }
    });
1
2
3
4
5
6
7
8
9
10
11
12

3.文本标题显示与隐藏

//绘制标注;
function getMarker(markerArr, type) {
    map.clearOverlays();
    var allponits = [];
    for (var i = 0; i < markerArr.length; i++) {
        var p0 = markerArr[i].point.split(',')[0];
        var p1 = markerArr[i].point.split(',')[1];
        var cat = markerArr[i].poi_type;
        var txt = markerArr[i].poi_name;
        var pos = new BMap.Point(p0, p1);
        var marker = addMarker(pos, cat);
        addInfoWindow(marker, markerArr[i]);

        //搜索时显示文本标签;
        if (type == 1) {
            addLabel(pos, txt, cat);
        }
        //设置最佳视野POI;
        //allponits.push(pos);
    }
    map.setViewport(allponits);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---

参考：

1. data-*属性的使用
2. HTML5中自定义数据属性：data-*的使用

---

@漏刻有时