开发 地图 JS API 2.0 入门教程 添加点标记

添加点标记 最后更新时间: 2024年01月25日

点标记是地图覆盖物中非常重要的要素之一,可以用来标记地图上的某个位置。JS API 支持多种类型的点标记,你可以根据需求来选择合适的类型。本文介绍如何在地图图面上添加自定义的点标记AMap.Marker

自定义点标记示例

1、添加自定义点标记 Marker

1

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});
3

1.3 自定义Marker

Marker实例的内容content是可以自定义的,content属性值是字符串拼接的 DOM 元素。

//点标记显示内容
const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn" onclick="clearMarker()">X</div>
</div>`

自定义内容的样式

.custom-content-marker {
  position: relative;
  width: 25px;
  height: 34px;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
}

.custom-content-marker .close-btn {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 15px;
  height: 15px;
  font-size: 12px;
  background: #ccc;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 15px;
  box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
}

.custom-content-marker .close-btn:hover{
  background: #666;
}
4

1.4 创建Marker对象

提示

如果不知道如何确认经纬度前往 拾取坐标

const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度
const marker = new AMap.Marker({
  position: position,
  content: markerContent, //将 html 传给 content
  offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
});
提示

offset: new AMap.Pixel(-13, -30),之所以为(-13,-30),因为需要让上图以 [center bottom] 的方式扎在对应的经纬度上,上图是宽26px,高34px(去掉下部阴影为30px),因此需要对自定内容做个offset的偏移(-13,-30)

5

1.5 将Marker添加到地图上

 map.add(marker);
6

1.6 给 Marker 绑定事件

function clearMarker() {
  map.remove(marker); //清除 marker
}
document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件

Marker从地图上移除:map.remove(marker)

2、本章涉及的属性及方法说明

2.1 AMap.Marker

参数/方法

说明

类型 

参数值描述

默认值

position

点标记在地图上显示的位置

AMap.LngLat|

Array

AMap.LngLat()经纬度对象 |

经纬度构成的一维数组[116.39, 39.9]

-

content

点标记显示内容。content有效时,icon属性将被覆盖

String

HTML 要素字符串 |

 HTML DOM 对象

-

offset

点标记显示位置偏移量

-

具体说明见 代码示例步骤4

 [0,0]

返回顶部 示例中心 常见问题 智能客服 公众号
二维码