百度地图多网点标注文字弹窗代码

 // 百度地图API功能
    map = new BMap.Map("allmap");
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.centerAndZoom(new BMap.Point(121.554876, 29.81333), 15);
    //ajax异步读取数组即可;
    var data_info = [[121.564706, 29.809087, "地址:浙江省宁波市鄞州区钱湖南路1058号 \n 责任人:张三丰"],
        [121.564534, 29.811688, "地址:浙江省宁波市鄞州区泰康中路226号"],
        [121.561924, 29.813084, "地址:浙江省宁波市鄞州区天唯艺术酒店"],
        [121.552353, 29.824462, "地址:鄞州区人民政府"]
    ];
    var opts = {
        width: 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title: "垃圾分类箱体分布网点", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));  // 创建标注
        var content = data_info[i][2];
        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content, marker);
    }
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                    openInfo(content, e)
                }
        );
    }
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
发布了81 篇原创文章 · 获赞 14 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_41290949/article/details/103032325