谷歌地图“pin”可以是 HTML 代码而不是图像吗？答案

【问题标题】：Can a google maps "pin" be HTML code rather than an image?谷歌地图“pin”可以是 HTML 代码而不是图像吗？
【发布时间】：2016-09-18 09:55:23
【问题描述】：

我正在尝试在地图内的各个位置显示自定义图钉，但问题是图钉非常动态，并且在放大/缩小以及一些搜索参数时会不断变化，所以我想知道是否有是一种将自定义引脚创建为 Html 代码而不是图像的方法。

例如我想做的是

var marker = new google.maps.Marker({
   position: myLatLng,
   icon: // code here instead of a link to an image.
   map: map
});

这可能吗？

【问题讨论】：

标签： javascript google-maps google-maps-markers

【解决方案1】：

您可以使用RichMarkers 来实现此目的。通过这种方式，您可以将使用 CSS 样式的 HTML 渲染为地图标记：

 marker = new RichMarker({
      position: mapCenter,
      map: map,
      draggable: true,
      content: '<div class="my-marker"><div>This is a nice image</div>' +
        '<div><img src="https://farm4.static.flickr.com/3212/3012579547_' +
        '097e27ced9_m.jpg"/></div><div>You should drag it!</div></div>'
      });

【讨论】：