Question

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

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

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

P.S。第一次发帖提问，希望很清楚！非常感谢你的帮助!!!!

Answer 1

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

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

Answer 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个表状态和城市的数据库。标记显示州内的城市状态和数量。

在Google Maps Marker上显示自定义数据（类似于Instagram Photo Photo）

2 个答案: