Vue3中使用高德地图apijs时添加marker点位

注意：示例代码为vue3版本，高德地图2.0

官方文档：https://lbs.amap.com/api/javascript-api-v2/guide/amap-marker/default-marker#s2

1.地图加载,若已经创建请忽略

https://blog.csdn.net/qq_50931953/article/details/139803103?spm=1001.2014.3001.5502

2.将marker添加到地图中

...

//地图

const map = ref(null)

//marker点位

const marker = ref(null)

...

        .then((AMap) =>{

         ...

        //加载marker点位，也可以直接将方法写在这里

        initMarker(AMap); 

}

...

//加载marker点位

function initMarker(AMap){

        marker.value = new AMap.Marker(

        {

        position:[110.1,31.28], //点位经纬度坐标

        icon:"url地址",  //此处若不传则是官方默认的点位图标，也可以替换成你的点位图标url

        title:"点位", //若设置此属性，则鼠标滑过点位时将显示此信息，不设置则不会显示

        zIndex:5, //层级，当多个点位重叠时，层级高的将显示在最上层

        id:5 //自定义属性，属性名可替换成其他，只要是官方文档中没有的即可

        }

)

        //将点标记添加到地图中

        map.value.add(marker.value);

}

...

若有多个marker，则只需要将多个marker放到数组中，然后执行add方法即可

const markers = [marker1.value,marker2.value,marker3.value];

map.value.add(markers);