如何在谷歌地图的标记上添加用户图像？答案

【问题标题】：How to add user images on markers in google maps?如何在谷歌地图的标记上添加用户图像？
【发布时间】：2018-07-14 22:03:29
【问题描述】：

我正在构建一个 Angular 应用程序，其中我需要将用户个人资料图像作为标记显示在谷歌地图上。

位置来自作为 JSON 格式的 API，带有 Lat、long 和用户图像。另外，我在地图中使用聚类。每当我单击集群时，应该会出现带有图像的标记。

我正在尝试 AGM 地图库和 Google Maps Javascript API 有办法吗？

【问题讨论】：

【解决方案1】：

使用自定义标记并使用您自己的图像。您只需将图像的 url 传递给 Marker 对象的 icon 属性，如下所示...

var marker = new google.maps.Marker({
        position: point,
        icon: 'http://contoso.com/image.png',
        map: map
      });

如果您需要对该图像及其呈现方式进行更多控制。 Google Maps API 提供和icon object specification 你可以使用

var icon = {
    url: 'http:contoso.com/image.png',
    anchor: new google.maps.Point(0, 0)
}

Google Maps APIs网站上有很多文档和例子

【讨论】：

【解决方案2】：

如果您不想使用谷歌地图默认标记并希望将自定义 HTML 添加到标记，看看这个插件 - https://github.com/googlemaps/js-rich-marker
使用 HTML 作为谷歌地图标记的非常简单的插件。

注意 - 基本上这个插件使用自定义覆盖作为标记。因此，与默认的谷歌地图标记相比，我认为使用它会使地图在有很多标记时变得有点沉重（尤其是在智能手机上）

【讨论】：