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

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

线上实例： https://kylebing.cn/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' },

五、最终结果：

https://kylebing.cn/tools/map/#/info/car-department