在 MarkerClustererOptions 的 MarkerClustererPlus 样式参数中无法正常工作

Question

我正在使用 MarkerClustererPlus，然后我为 MarkerClustererOptions 的样式参数创建了一个数组，传递不同类型的图标以显示在地图中，但它没有渲染所有图标。它只是从样式数组中选取第一个图标，而不是其他图标。

      function initialize() {
        var center = new google.maps.LatLng(63.078877, 21.660509);       
        var locations = [
            {name:'ABB',      lat:63.0883633,  lon:21.6609529, image:'abb.png',      webp:'http://www.abb.fi/'},
            {name:'Wartsila', lat:63.102724,   lon:21.610709,  image:'', webp:'http://www.wartsila.com/'},
            {name:'EPV',      lat:63.092265,   lon:21.55922,   image:'',      webp:'http://www.epv.fi/'},
            {name:'Vacon',    lat:63.0597281,  lon:21.7370728, image:'',    webp:'http://www.vacon.fi/'},
            {name:'Vamp',     lat:63.06153,    lon:21.735314,  image:'',     webp:'http://www.vamp.fi/'}
        ];
        var clusterStyles = [
            {textColor: 'white', url: 'do.png', height: 50, width: 50 },
            {textColor: 'white',url: 'do1.png',height: 50,width: 50},
            {textColor: 'white', url: 'do2.png', height: 50, width: 50}
        ];
          var clusterOptions = {
            styles: clusterStyles
    
                }
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < locations.length; i++) {
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
            icon:locations[i].image,
            url:locations[i].webp
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers,clusterOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);

      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }
      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }
      #map {
        width: 600px;
        height: 400px;
      }

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MarkerClusterer v3 Simple Example</title>


    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script  src="markerclusterer.js"> </script>
</head>
  <body> 
      <div id="map-container"><div id="map"></div></div>
  </body>
  </html>

我遗漏了哪一步，我该如何解决。

Answer 1

我不确定您对样式的期望是什么，但我想您误解了目的。

您定义了3个样式，什么意思：

第一种样式将用于少于 10 个标记的簇
第二种样式将用于具有 10-99 个标记的簇
第三种样式将用于所有其他集群

在您的代码中您创建了 5 个标记（它们将被聚类），因此 Markerclusterer 将始终使用第一种样式，因为标记总是少于 10 个。

向Markerclusterer添加更多标记，当一个集群包含超过9个（或超过99个）标记时，其他图标也会被使用。

Answer 2

要选择特定样式，您必须设置 calculator 函数：

styles: An array of ClusterIconStyle elements defining the styles of the cluster markers to be used. The element to be used to style a given cluster marker is determined by the function defined by the calculator property.

您可以查看其余文档 here。

在 MarkerClustererOptions 的 MarkerClustererPlus 样式参数中无法正常工作

In MarkerClustererPlus style parameter of MarkerClustererOptions not working properly

javascript

css

google-maps

google-maps-api-3

markerclusterer