自定义点标记

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

自定义图标点标记

自定义内容点标记

自定义图标示例

1、使用说明

1.1 准备

成为开发者并创建 key

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

提示

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

1.2 创建地图

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

JavaScript

1.3 创建自定义图标 URL 的 Marker 

准备可访问的图标 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);

JavaScript

提示

设置了自定义图标可以使用offset偏移量调整显示位置。

1.4 创建指定 Icon 实例的 Marker 

准备线上可访问 URL 图片，生成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);

JavaScript

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);

JavaScript

提示

自定义样式

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

JavaScript

2.1 AMap.Marker

参数/方法

说明

类型 

参数值描述

默认值

position

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

LngLat|

Array

经纬度对象或经纬度构成的一维数组。例如：

AMap.LngLat(116.39,39.9)或[116.39, 39.9]

-

offset

点标记显示位置偏移量

Pixel

详见 offset属性教程

[0,0]

title

鼠标滑过点标记时的文字提示

String

-

-

zooms

点标记显示的层级范围，超过范围不显示

Array

-

[2, 20]

icon

在点标记中显示的图标

Icon |

 String

可以传一个图标地址，也可以传Icon对象，有合法的content内容设置时，此属性无效

-

content

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

String

HTML 要素字符串 |

 HTML DOM 对象

-

2.2 AMap.Icon

参数/方法

说明

类型 

参数值描述

默认值

size

图标尺寸

Size

-

(36,36)

image

图标的取图地址

String

-

蓝色图钉图片

imageOffset

图标取图偏移量，适于雪碧图等

Pixel

-

-

imageSize

图标所用图片大小

Size

根据所设置的大小拉伸或压缩图片，等同于 CSS 中的background-size属性。可用于实现高清屏的高清效果

-