Javascript 带有重叠标记的不同图标

我正在实现github.com/jawj/OverlappingMarkerSpiderfier，以便在我的谷歌地图上创建Pin集群

我想做的是有一个I集群图标，里面有一个数字，告诉用户有多少pin，就像google默认集群视图一样。Se屏幕转储。如果不可能有一个数字，只要我可以设置一个我选择的集群图标就可以了。 屏幕显示群集在谷歌上的外观

单击群集时，它会打开并显示pin。在我的例子中，每个pin都是一个小缩略图。Se屏幕转储 屏幕显示单击群集后的外观

我的问题是，我不知道如何制作类似谷歌集群的解决方案。我的代码显示一个缩略图作为集群图标（参见screendumb），我想要“google解决方案”。 屏幕显示在单击群集之前它的外观

--到目前为止我的剧本--

//一些示例数据
var mapData=[{纬度：56.03519372，液化天然气：12.61253154，图片：“https://images.pexels.com/photos/2764678/pexels-photo-2764678.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200{lat:55.69293644，lng:12.56145395，图片：https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200"},{拉丁美洲：55.69293644，液化天然气：12.56145395，图片：https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200{lat:55.69293644，lng:12.56145395，图片：https://images.pexels.com/photos/4144294/pexels-photo-4144294.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200“}，{lat:55.69293644，lng:12.56145395，图片："https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200"}];
函数initMap（）{
var-clusterMarker=[]；
var map=new google.maps.map（document.getElementById（'map'）{
中心：新的google.maps.LatLng（mapLat，mapLng），
缩放：10，
});
//创建信息窗口
var infoWindow=new google.maps.infoWindow（）；
//创建重叠标记spiderfier instance
var oms=新的重叠标记器（映射{
markersWontMove：没错，
马克斯旺泰德：是的，
});
//这是使蜘蛛侠工作所必需的
oms.addListener（'click'，函数（标记）{
infoWindow.setContent（marker.desc）；
信息窗口。打开（地图、标记）；
});
var iconSize=新的google.maps.Size（50,50）；
对于（var i=0；i

我认为您需要的一个选项是将“未命名”标记的图标设置为群集图标（默认设置为：

https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png

）并将图标标签设置为标记的数量。请注意，这不会有完整的集群行为，它将始终具有相同的图标（在本例中为蓝色图标），它不会根据同一位置上标记的数量而改变。如果希望发生这种情况，可以实现这种行为，但这将是更复杂的代码

  google.maps.event.addListener(map, 'idle', function() { 
    // can't call markersNearMarker until idle event fires
    oms.addListener('format', function(marker, status) {
      var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED ? marker.uniqIcon :
        status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png" :
        status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE ? marker.uniqIcon :
        null;
      var spiderfiedMarkers = oms.markersNearMarker(marker, false);
      marker.setIcon({
        url: iconURL,
        scaledSize: new google.maps.Size(50, 50)
      });
      if (status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE)
        marker.setLabel("" + (spiderfiedMarkers.length + 1));
      else
        marker.setLabel("");
    });
  });

注意：添加了标记的唯一图标作为标记的属性（

uniqIcon

），这样标记一旦被蜘蛛化，就可以设置为其唯一图标：

var marker = new google.maps.Marker({
  position: location,
  map: map,
  uniqIcon: point.picture
});
marker.setIcon({
  url: point.picture,
  title: "" + i,
  size: iconSize,
  scaledSize: iconSize
});

代码片段：

//一些示例数据
var mapData=[{纬度：56.03519372，液化天然气：12.61253154，图片：“https://images.pexels.com/photos/2764678/pexels-photo-2764678.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200{lat:55.69293644，lng:12.56145395，图片：https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200"},{拉丁美洲：55.69293644，液化天然气：12.56145395，图片：https://images.pexels.com/photos/3184454/pexels-photo-3184454.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200{lat:55.69293644，lng:12.56145395，图片：https://images.pexels.com/photos/4144294/pexels-photo-4144294.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200{lat:55.69293644，lng:12.56145395，图片：https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=200"}];
var-mapLat=0；
var-mapng=0；
函数initMap（）{
var-clusterMarker=[]；
var map=new google.maps.map（document.getElementById（'map'）{
中心：新的google.maps.LatLng（mapLat，mapLng），
缩放：10，
});
//创建信息窗口
var infoWindow=new google.maps.infoWindow（）；
//创建重叠标记spiderfier instance
var oms=新的重叠标记器（映射{
markersWontMove：没错，
马克斯旺泰德：是的，
});
google.maps.event.addListener（映射'idle'，函数（）{
oms.addListener（'格式'，功能（标记，状态）{
var iconURL=status==OverlappingMarkerSpiderfier.markerStatus.Spiderified？marker.uniqIcon:
状态==重叠MarkersPiderFier.markerStatus.SPIDERFIABLE？”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png" :
状态==重叠MarkerSpiderFier.markerStatus.UnsiderFiable？marker.uniqIcon:
无效的
var spiderfiedMarkers=oms.markersNearMarker（marker，false）；
marker.setIcon({
网址：iconURL，
scaledSize:new google.maps.Size（50,50）//使SVG图标在IE中工作
});
if（status==OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE）
marker.setLabel（“+（spiderfiedMarkers.length+1））；
其他的
marker.setLabel（“”）；
});
});
//这个
var marker = new google.maps.Marker({
  position: location,
  map: map,
  uniqIcon: point.picture
});
marker.setIcon({
  url: point.picture,
  title: "" + i,
  size: iconSize,
  scaledSize: iconSize
});