高德地图 JS Web 添加自定义图标，自定义窗口标记
如何做一个类似这样的地点指示的地图：
线上实例： /tools/map/#/info/car-department
一、你需要掌握的
在进行之前你需要了解的：
高德地图 Web 端 JS API 的使用，参阅：地图 JS API点（AMap.Marker）标记的基础用法
所有
API用到的对象，都是AMap的属性类，如Marker,Circle,Icon等等
二、加自定义地点标记
了解上面提到的知识之后，就可以添加自定义的标记了。
主要用到的是AMap.Marker中的content配置项。
content里面放置普通 HTML 片段即可，像画普通页面那样，这样就可以随心所欲了。我的content内容是这样的：
这里用的反引号，ES6 关于模板字符串的语法，不了解的看这里：ES6 模板字符串
content: `<div class="marker"><div class="title">${item.name}</div><a href="tel:${item.phone}" class="phone">${item.phone}</a></div>`,
三、注意事项
这样操作之后，你会发现展示很不正常，窗口特别大。
这是生成的Maker中官方添加了一个 css 属性：white-space: pre，如下图
如何解决呢，加一条覆盖用该 css 属性即可：
.amap-marker-content{white-space: normal !important;}
四、代码
function addMarker(item) {let marker = new AMap.Marker({position: item.position,content: `<div class="marker"><div class="title">${item.name}</div><a href="tel:${item.phone}" class="phone">${item.phone}</a></div>`,});map.add(marker);}// map 是上面已经声明的地图对象，改成你自己的地图对象即可// item 是我传入的自定义的标点对象，格式如下：{position: [117.225284, 36.661391], name: "历下车管分所", phone: '66712345' },
五、最终结果：
/tools/map/#/info/car-department
