美文网首页Web 前端开发
百度地图api标注多个点的hover标签

百度地图api标注多个点的hover标签

作者: JokerPeng | 来源:发表于2017-07-24 14:43 被阅读0次

    百度地图api中给指定点加入标签,且鼠标经过时显示,一般逻辑是先创建marker:
    ````var marker = new BMap.Marker(new BMap.Point(118, 38)); // 创建点```
    然后给点增加label标签:

    var label = new BMap.Label('这是一个标签', {
                            offset: new BMap.Size(20, -10)
                        });
    

    将标签添加给点上:
    marker.setLabel(label); //添加标签
    当需要给多个点添加标签时候,只需要一个for循环遍历坐标json和对应标签就行了,如果还需要让标签在鼠标经过时显示,离开隐藏,则需要绑定mouseover和mouseout:

    var points = [
         [95.43511, 37.31229, '这是青海省'],
         [119.71698, 41.907, '这是辽宁省'], 
         [110.43058, 26.1442, '这是广西自治区'] 
     ];
    
    var pointArray = new Array();
        for (var i = 0; i < points.length; i++) {
            var marker = new BMap.Marker(new BMap.Point(points[i].lon, points[i].lat)); // 创建点
            map.addOverlay(marker); //增加点
            var label = new BMap.Label(points[i].label, {
                offset: new BMap.Size(20, -10)
            });
            marker.setLabel(label); //添加标签
            pointArray[i] = new BMap.Point(points[i].lon, points[i].lat);
            // 初始化不显示
            label.setStyle({
                display: "none"
            });
          // 鼠标经过时
            marker.addEventListener("mouseover", function(e) {
                var label = this.getLabel();
                label.setStyle({
                    display: "block"
                });
            });
            // 鼠标离开时
            marker.addEventListener("mouseout", function(e) {
                var label = this.getLabel();
                label.setStyle({
                    display: "none"
                });
            });
        }
    
    baiduMap.jpeg

    相关文章

      网友评论

        本文标题:百度地图api标注多个点的hover标签

        本文链接:https://www.haomeiwen.com/subject/gplbkxtx.html