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：定义样式的ClusterIconStyle元素数组要使用的簇标记。用于设计样式的元素给定的簇标记是由定义的函数决定的计算器属性。

您可以查看其余文档here。

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

2 个答案: