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

百度地图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"
            });
        });
    }
百度地图api标注多个点的hover标签_第1张图片
baiduMap.jpeg

你可能感兴趣的:(百度地图api标注多个点的hover标签)