自定义点标记

您所在的位置：网站首页 › 图层全景地图怎么做 › 自定义点标记

自定义点标记

2024-01-30 09:46| 来源: 网络整理| 查看: 265

本文介绍如何设置自定义点标记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", //设置地图模式 });

前往展示地图，了解完整地图创建

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偏移量调整显示位置。

查看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.Marker的content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活，设置了 content 以后会覆盖 icon 属性。

const content = ` `; const marker = new AMap.Marker({ content: content, //自定义点标记覆盖物内容 position: [116.397428, 39.90923], //基点位置 offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置 }); map.add(marker);提示

自定义样式

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

查看示例

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 对象

查看所有AMap.Marker属性和方法

2.2 AMap.Icon

参数/方法

说明

类型

参数值描述

默认值

size

图标尺寸

Size

(36,36)

image

图标的取图地址

String

蓝色图钉图片

imageOffset

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

Pixel

imageSize

图标所用图片大小

Size

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

查看所有AMap.Icon属性和方法

【本文地址】

公司简介

联系我们