开发 地图 JS API 2.0 进阶教程 点标记 自定义点标记

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

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

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

自定义图标示例

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", //设置地图模式
});

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

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

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.Markercontent 属性。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

参数/方法

说明

类型 

参数值描述

默认值

position

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

AMap.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属性。可用于实现高清屏的高清效果

-

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