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

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

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

线上实例： ​​https://kylebing.cn/tools/map/#/info/car-manage​​

你需要掌握的

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

• 高德地图 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-manage​​