点

<hcm-amap-marker>

简介

<hcm-amap-marker>组件用于在地图上显示标记的位置，<hcm-amap-marker>组件必须以子组件的形式存在于<hcm-amap>中

属性

position

地图坐标点对象，其属性必须包含以下两项：

• latitude (浮点型 / 必选) -- 高德坐标系下坐标点的纬度
• longitude (浮点型 / 必选) -- 高德坐标系下坐标点的经度

centerOffset、calloutOffset

位置偏移对象，其属性包含以下一项或两项：：

• x (浮点型 / 可选) -- 手机屏幕左右方向偏移，单位是 px
• y (浮点型 / 可选) -- 手机屏幕上下方向偏移，单位是 px

事件

示例

<template>
    <hcm-amap class="map" id="hcm-amap" ref="amap">
        <hcm-amap-marker class="map-marker"
              v-for="(marker, idx) in markers"
              :key="idx"
              :position="marker.position"
              @selected="clickMarker(marker, idx)"
              @deselected="deselectedMarker(marker, idx)"
              :icon="marker.icon"
              :calloutIcon="marker.calloutIcon"
              :calloutOffset="marker.calloutOffset"
              :canShowCallout="marker.canShowCallout"
              :centerOffset="marker.centerOffset"/>
    </hcm-amap>
</template>
<script>
    module.exports = {
        data: {
            markers: [
                {
                    position: { // 和瑞科技广场
                            latitude: 30.185349,
                            longitude: 120.194646
                        },
                    canShowCallout: true,
                    icon: "https://mobile-saas-dev.obs.cn-east-2.myhuaweicloud.com/SysImage/configure/startLogo.png",
                    centerOffset: {
                        x: 0,
                        y: 0
                    },
                    calloutIcon: "https://mobile-saas-dev.obs.cn-east-2.myhuaweicloud.com/SysImage/configure/startLogo.png",
                    calloutOffset: {
                        y: 20,
                        x: 0
                    }
                },
                {   // 系统标记点
                    position: { // 新华三
                        latitude: 30.185372,
                        longitude: 120.198062
                    },
                    canShowCallout: true,
                }
            ],
        },
        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 iOS平台下，canShowCallout对应资源不存在时，标记点不会显示出来（没有高度）；calloutIcon对应资源不存在时，点击标记点没有效果，事件仍会触发