在谷歌地图标记上显示自定义数据（类似于 Instagram 照片地图）答案

【问题标题】：Showing Customized Data on Google Maps Marker (Similar to Instagram Photo Map)在谷歌地图标记上显示自定义数据（类似于 Instagram 照片地图）
【发布时间】：2013-02-06 07:38:21
【问题描述】：

我是 Google Maps API 的新手，一直在寻找自定义标记的方法。提供的 API 只允许我更改图标，但我真正需要的是将 HTML 内容传递给标记。我想将一些数据（例如numbers）传递给标记，当用户单击标记时，更多详细信息将显示在 infoWindow 中。（类似于this website）

起初，我以为它会像 Instagram 照片地图，你有一个地区内的照片摘要。但后来我意识到这更像是一个 markerClusterer，它只是计算范围内的标记总数（如果我错了，请纠正我）。

我仍然找不到在标记上显示自定义数据的任何方法。如果没有可用的默认 API，我可以使用任何插件吗？

附：第一次发问题，希望清楚！非常感谢您的帮助！！！！

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案1】：

基本上你在链接地图上看到的不是真实的google.maps.Markers，你看到的是Custom Overlays。使用自定义叠加层，您可以在地图上绘制任何 HTML 内容，例如这些标签。

您可以使用内置方法来绘制这些叠加层，也可以使用 infobox 之类的库

【讨论】：

【解决方案2】：

您可以使用styledmarker 库自定义标记。该库用于创建可以以不同方式设置样式的标记，例如更改颜色或形状，或添加文本标签。下面是一个如何将这个库与 XML 一起使用的示例。

for (var i = 0; i < markers.length; i++) {  
      var text = markers[i].getAttribute("text");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
     var styleMaker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:text}),position:myLatLng,map:map});

}

我有一个DEMO 使用它与使用 XML 的 2 个表状态中心和美国城市的数据库。标记显示州和州内城市的数量。

【讨论】：