注意:示例代码为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);

Logo

加入社区!打开量化的大门,首批课程上线啦!

更多推荐