自定义点标记 最后更新时间: 2023年12月26日

本文介绍如何设置自定义点标记AMap.Marker，并介绍如何更改其样式、图标和内容，包括：

1. 自定义图标点标记
2. 自定义内容点标记

自定义图标示例

1、使用说明

1.1 准备

1.2 创建地图

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

1.3 为创建的 Marker 指定自定义图标 URL

准备可访问的图标 URL，设置icon属性即可展示自定义图标。

const marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9),
  offset: new AMap.Pixel(-10, -10),
  icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
  title: "北京",
});
map.add(marker);

1.4 为创建的 Marker 指定 Icon 实例

准备线上可访问icon图片，生成Icon实例。此种方式可以设置图标大小size，偏移imageOffset等属性，比单纯设置 URL 更加灵活。

//创建 AMap.Icon 实例：
const icon = new AMap.Icon({
  size: new AMap.Size(25, 34), //图标尺寸
  image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
  imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
  imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
const marker = new AMap.Marker({
  position: new AMap.LngLat(116.35, 39.89), //点标记的位置
  offset: new AMap.Pixel(-13, -30), //偏移量
  icon: icon, //添加 Icon 实例
  title: "北京",
  zooms: [2, 12], //点标记显示的层级范围，超过范围不显示
});
map.add(marker);

1.5 为创建的 Marker 指定自定义内容

对于更加复杂的 marker 展示，我们可以使用 AMap.Marker的content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活，设置了 content 以后会覆盖 icon 属性。

const content = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
</div>`;
const marker = new AMap.Marker({
  content: content, //自定义点标记覆盖物内容
  position: [116.397428, 39.90923], //基点位置
  offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置
});
map.add(marker);

<style>
.custom-content-marker {
  width: 25px;
  height: 34px;
}
.custom-content-marker img {
  width: 100%;
  height: 100%;
}
</style>

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

2.1 AMap.Marker

2.2 AMap.Icon