自定义点
<hcm-amap-custom-marker>
简介
<hcm-amap-custom-marker>组件用于在地图上显示标记的位置，标记，<hcm-amap-custom-marker>组件必须以子组件的形式存在于<hcm-amap>中，<hcm-amap-custom-marker>支持子组件
属性
| 属性名 | 类型 | 默认值 | 必选 | 支持iOS | 支持Android | 说明 |
|---|---|---|---|---|---|---|
position |
Object |
- | Y | Y | Y | 点的地理位置坐标 |
centerOffset |
Object |
- | N | Y | Y | 默认情况下，标记点容器的中心位置与position的坐标位置重合，该属性能让标记点容器发生偏移。正的偏移使容器朝右下方移动，负的朝左上方，单位是px； |
position
地图坐标点对象，其属性必须包含以下两项：
latitude(浮点型 / 必选) -- 高德坐标系下坐标点的纬度longitude(浮点型 / 必选) -- 高德坐标系下坐标点的经度
centerOffset
位置偏移对象，其属性包含以下一项或两项：
x(浮点型 / 可选) -- 手机屏幕左右方向偏移，单位是pxy(浮点型 / 可选) -- 手机屏幕上下方向偏移，单位是px
事件
| 事件名 | 支持iOS | 支持Android | 说明 |
|---|---|---|---|
selected |
Y | Y | 标记点被选中 |
deselected |
Y | Y | 标记点取消选中 |
事件返回的数据对象包含以下一项或者多项：
success（布尔值 / 必选)true-- 成功false-- 失败
message（字符串 / 可选) -- 成功或者失败的相关信息
示例
<template>
<hcm-amap class="map" id="hcm-amap" ref="amap">
<hcm-amap-custom-marker class="map-custom-marker"
v-for="(marker, idx) in customMarkers"
:key="idx"
:position="marker.position"
:centerOffset="marker.centerOffset"
@selected="clickMarker(marker, idx)"
@deselected="deselectedMarker(marker, idx)">
</hcm-amap-custom-marker>
</hcm-amap>
</template>
<script>
module.exports = {
data: {
customMarkers: [
{
position: {
'latitude': 30.181046,
'longitude': 120.200826
},
title: '中南建设大厦',
centerOffset: {
y: -16
}
},
{
position: {
'latitude': 30.187751,
'longitude': 120.190644
},
title: '网易',
centerOffset: {
y: -16
}
}
],
},
methods: {
clickMarker(marker, idx) {
modal.toast({
message: 'selecteded marker' + JSON.stringify(marker.position) + ' at index = ' + idx,
duration: 1.0
})
},
deselectedMarker(marker, idx) {
modal.toast({
message: 'delecteded marker' + JSON.stringify(marker.position) + ' at index = ' + idx,
duration: 1.0,
})
},
}
}
</script>
TIP 请保证父组件为
hcm-amap