三. 自定义内容标记
对于更加复杂的 marker 展示,我们可以使用 Marker类的content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活,设置了 content 以后会覆盖 icon 属性。具体实例如下:
var content = '
'; var marker = new AMap.Marker({ content: content, // 自定义点标记覆盖物内容 position: [116.397428, 39.90923], // 基点位置 offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置 }); map.add(marker);
四. 自定义点标记的锚点位置
如果用户自定义点标记内容,无论是自定义 Icon 还是 自定义内容,都需要为定义的图片重新设置锚点位置。设置方法如下:
1.设置 anchor (自v1.4.13 新增属性)
通过 anchor 可以方便的设置锚点方位。anchor 可选值有 'top-left'、'top-center'、'top-right'、'middle-left'、'center'、'middle-right'、'bottom-left'、'bottom-center'、'bottom-right' , 分别代表了点标记锚点的不同方位。
var marker = new AMap.Marker({ icon: '//a.amap.com/jsapi_demos/static/demo-center/marker/marker-bottom-left.png', // 自定义点标记 position: [116.418481,39.90833], // 基点位置 offset: new AMap.Pixel(0,0), // 设置点标记偏移量 anchor:'bottom-left', // 设置锚点方位 }); map.add(marker);
2.设置 offset
通过设置 offset 来添加偏移量。当偏移量为 (0, 0) 时,自定义内容默认以左上角为基准点(若设置了 anchor,基准点位置则为 anc