开发 地图 JS API 2.0 进阶教程 点标记 默认点标记

点标记Marker 最后更新时间: 2023年08月02日

本章教程将介绍如何在地图图面上添加默认点标记。

准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

点标记 Marker

点标记适用于用户需要在地图上创建一个标记的场景。Marker 类型推荐在数据量为 500 以内时使用。若数据量大于 500 ,推荐使用 LabelMarker,可以获得更好的性能。另外需要地图标注可以避让用户标注时,也推荐使用 LabelMarker

1

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});
2

添加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示例放入一个数组Array中。

// 多个点实例组成的数组
const markerList = [marker1, marker2, marker3];

map.add(markerList);
3

绑定Marker实例的事件

const clickHandler = function(e) {
  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图!');
};

// 绑定事件
map.on('click', clickHandler);

解除绑定事件使用:map.off('click', clickHandler)

示例
中心
常见
问题
智能
客服