高德地图 JS Web 添加自定义图标，自定义窗口标记

2024-07-13 06:49| 来源: 网络整理| 查看: 265

如何做一个类似这样的地点指示的地图：

线上实例： http://kylebing.cn/tools/map/#/info/car-department

在这里插入图片描述

一、你需要掌握的

在进行之前你需要了解的：

高德地图 Web 端 JS API 的使用，参阅：地图 JS API点（AMap.Marker）标记的基础用法

所有 API 用到的对象，都是 AMap 的属性类，如 Marker, Circle, Icon 等等

二、加自定义地点标记

了解上面提到的知识之后，就可以添加自定义的标记了。

主要用到的是 AMap.Marker 中的 content 配置项。

content点标记显示内容，可以是HTML要素字符串或者HTML DOM对象。content有效时，icon属性将被覆盖

content 里面放置普通 HTML 片段即可，像画普通页面那样，这样就可以随心所欲了。我的 content 内容是这样的：

这里用的反引号，ES6 关于模板字符串的语法，不了解的看这里：ES6 模板字符串

content: ` ${item.name}

【本文地址】

公司简介

联系我们