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

Posted 2023-03-28

【中文标题】谷歌地图“pin”可以是 HTML 代码而不是图像吗？

【英文标题】：Can a google maps "pin" be HTML code rather than an image?

【发布时间】：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
);

这可能吗？

【参考方案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>'
      );