添加点标记最后更新时间: 2023年03月27日

亲手试一试

下载完整代码

点标记Marker，是地图覆盖物重要的地图要素，可以用来标记某个位置，Marker的种类繁多，使用者可以根据自己实际需求来选择合适的类型。

本章将讲述如何在地图图面上添加一个自定义的点标记。其他Marker类型请跳转点标记查看详情。

准备

成为开发者并创建 key

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

添加自定义内容Marker

创建地图

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

创建自定义Marker内容

自定义内容Marker，即一个Marker实例的显示内容content是开发者自己实现的，可以是HTML的元素字符串或者是HTML DOM对象。

// 点标记显示内容，HTML要素字符串
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;
}

创建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)。更多offset的使用方式。

将Marker添加到地图上

 map.add(marker);

将marker从地图上移除： map.remove(marker);

添加点标记 最后更新时间: 2023年03月27日