默认点标记 Marker 最后更新时间: 2024年07月12日
本文介绍如何在地图图面上添加默认点标记。
添加点标记示例
1、实现步骤
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
zoom: 10, //地图级别
center: [116.397428, 39.90923], //地图中心点
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //设置地图模式
});
3
1.3 添加 Marker 实例
提示
如果不知道如何确认经纬度前往 拾取坐标
//创建一个 Marker 实例:
const marker = new AMap.Marker({
position: new AMap.LngLat(116.39, 39.9), //经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: "北京",
});
//将创建的点标记添加到已有的地图实例:
map.add(marker);
删除已有Marker对象使用:map.remove(marker)。
如果一次性添加多个Marker实例,只需将每个Marker实例放入一个数组中。
//多个点实例组成的数组
const markerList = [marker1, marker2, marker3];
map.add(markerList);
本示例仅展示了点标记的添加,若需修改点标记的默认图标请参考 自定义点标记。关于点标记的使用,我们推荐使用AMap.Marker类型来处理数据量在 500 以内的场景。若数据量大于 500 ,推荐使用AMap.LabelMarker,AMap.Marker相较于AMap.LabelMarker有着更加灵活的自定义配置如自定义 CSS 样式,点数量比较多的情况下AMap.LabelMarker可以带来更好的性能。