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

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

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

线上实例： 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: `
           <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' },

五、最终结果：

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