百度地图API-标注点添加标签

调用百度地图API，添加一个标注可以这样写：
map.addOverlay(new BMap.Marker(new BMap.Point(116.404, 39.915)));
添加多个Marker：

    // 编写自定义函数,创建标注
    function addMarker(point){
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
    }
    // 随机向地图添加25个标注
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    for (var i = 0; i < 25; i ++) {
        var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
        addMarker(point);
    }

添加超过一千个会导致卡顿，而加载大量标记时应使用BMap.PointCollection可以解决标记太多而卡顿的问题：

    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var points = [];  // 添加海量点数据
        for (var i = 0; i < data.data.length; i++) {
          points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
        }
        var options = {
            shape: BMAP_POINT_SHAPE_WATERDROP
        }
        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
        map.addOverlay(pointCollection);  // 添加Overlay
    } else {
        alert('请用chrome、safari、IE8+以上浏览器查看');
    }

数据使用官方data：http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js

image.png

但是没有点击事件，这里为每个点添加一个点击显示详情的一个对话框，代码如下：

pointCollection.addEventListener('click', function (e) {
        // 通过点击的坐标创建一个点对象，添加标签
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var opts = {
            title: "经纬度详情：",
            enableMessage: false,
        }
        var infowindow = new BMap.InfoWindow("经 纬 度 详 情" + "
lng：" + e.point.lng + "
lat" + e.point.lat, opts);
        map.openInfoWindow(infowindow, point);
});

效果如下：

image.png