AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/08/03 16:13
默认点标记 Marker

我们通过一个例子来说明如何创建地图标记点,下面是DEMO示例。

Marker 是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为 Point 和 MarkerOptions(可选)。

1.向地图中添加标注

如下示例,向地图中心点添加了一个标注,并使用默认的标注样式:

var point = new BMap.Point(116.404,39.915);
var marker = new BMap.Marker(point);// 创建标注
map.addOverlay(marker);// 将标注添加到地图中
2.常用配置项

创建 Marker 时,可以通过 MarkerOptions 设置标注的主要属性,常用属性如下:

  • icon:指定标注图标,属性值需要是 BMap.Icon 实例。Icon 用于控制标注图片资源和图标尺寸;更完整的图标设置方式可参考 设置点标记样式

  • anchor:设置标注锚点位置。默认值为 BMAP_ANCHOR_CENTER。

  • enableDragging:控制标注是否允许拖拽。默认值为 false;需要用户调整点位时可设置为 true。

  • enableMassClear:控制调用 map.clearOverlays() 时是否清除此标注。默认值为 true;如需保留固定点位,可设置为 false。

3.设置定位锚点

anchor 用于设置标注的锚点位置。可选值请参考 BMap.ControlAnchor

var marker = new BMap.Marker(point, {
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
});
map.addOverlay(marker);

完整效果可查看 设置点标记的锚点示例

4.拖拽标注并更新位置

需要让用户调整点位时,可在构造函数中开启拖拽,也可以在创建后通过 enableDragging() 和 disableDragging() 动态控制。拖拽结束后,可使用 getPosition() 获取新的地理坐标。

var marker = new BMap.Marker(point, {
enableDragging: true
});
map.addOverlay(marker);
marker.addEventListener("dragend", function () {
var position = marker.getPosition();
console.log(position.lng, position.lat);
});

完整效果可查看 点标记的拖拽示例

5.动态更新标注状态

标注添加到地图后,可以通过实例方法更新位置、旋转角度、标题和层级。多个标注重叠时,可使用 setZIndex() 调整显示顺序。

marker.setPosition(new BMap.Point(116.410, 39.920));
marker.setRotation(45);
marker.setTitle("新的点位名称");
marker.setZIndex(999);
6.监听标注事件

JSAPI支持监听覆盖物的事件,你可以通过 marker.addEventListener 来监听marker的事件

marker.addEventListener("click",function(){
alert("您点击了标注");
});
相关类参考

BMap.Marker
BMap.Point

上一篇

使用国测局坐标GCJ02

下一篇

设置点标记样式
本篇文章对您是否有帮助?