调用百度地图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("经 纬 度 详 情" + "<br/>lng：" + e.point.lng + "<br/>lat" + e.point.lat, opts);
map.openInfoWindow(infowindow, point);
});
image.png
