我们通过一个例子来说明如何创建地图标记点,下面是DEMO示例。
Marker 是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为 Point 和 MarkerOptions(可选)。
如下示例,向地图中心点添加了一个标注,并使用默认的标注样式:
var point = new BMap.Point(116.404,39.915);var marker = new BMap.Marker(point);// 创建标注map.addOverlay(marker);// 将标注添加到地图中
创建 Marker 时,可以通过 MarkerOptions 设置标注的主要属性,常用属性如下:
icon:指定标注图标,属性值需要是 BMap.Icon 实例。Icon 用于控制标注图片资源和图标尺寸;更完整的图标设置方式可参考 设置点标记样式。
anchor:设置标注锚点位置。默认值为 BMAP_ANCHOR_CENTER。
enableDragging:控制标注是否允许拖拽。默认值为 false;需要用户调整点位时可设置为 true。
enableMassClear:控制调用 map.clearOverlays() 时是否清除此标注。默认值为 true;如需保留固定点位,可设置为 false。
anchor 用于设置标注的锚点位置。可选值请参考 BMap.ControlAnchor。
var marker = new BMap.Marker(point, {anchor: BMAP_ANCHOR_BOTTOM_RIGHT});map.addOverlay(marker);
完整效果可查看 设置点标记的锚点示例。
需要让用户调整点位时,可在构造函数中开启拖拽,也可以在创建后通过 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);});
完整效果可查看 点标记的拖拽示例。
标注添加到地图后,可以通过实例方法更新位置、旋转角度、标题和层级。多个标注重叠时,可使用 setZIndex() 调整显示顺序。
marker.setPosition(new BMap.Point(116.410, 39.920));marker.setRotation(45);marker.setTitle("新的点位名称");marker.setZIndex(999);
JSAPI支持监听覆盖物的事件,你可以通过 marker.addEventListener 来监听marker的事件
marker.addEventListener("click",function(){alert("您点击了标注");});
上一篇
下一篇