在MarkerClustererPlus MarkerClustererOptions的MarkerClustererPlus樣式參數不能正常工作

我正在使用MarkerClustererPlus，然後我爲MarkerClustererOptions的樣式參數創建了一個數組，用於傳遞映射中顯示的不同類型的圖標，但它不會呈現所有圖標。它只是從風格陣列中挑選第一個圖標而不是其他。在MarkerClustererPlus MarkerClustererOptions的MarkerClustererPlus樣式參數不能正常工作

 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} 
 
     ]; 
 
     \t \t var clusterOptions = { 
 
\t \t \t  \t \t  styles: clusterStyles 
 
\t \t \t 
 
       } 
 
     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> \t 
 
     <div id="map-container"><div id="map"></div></div> 
 
    </body> 
 
    </html>

我錯過了哪一步，我怎麼能解決這個問題。

來源

2015-02-07 Sarthak Sharma

要選擇你要設置的calculator功能的特定樣式：

風格：定義要使用的簇標記樣式的 ClusterIconStyle元素的數組。給定聚類標記用於設置樣式的元素由計算器屬性定義的函數決定。

您可以參考文檔here的其餘部分。

來源

2015-02-07 22:19:47

謝謝，我明白了。我必須使用setCalculator（）方法。然後，我可以設置風格將改變後的標記數量。謝謝 – 2015-02-08 06:18:30

我不確定你對樣式有什麼期望，但我想你誤解了目的。

你定義了3個款式，什麼手段：

一號風格將用於集羣少於10個標記
第二風格將用於集羣，10-99標記
第三樣式將被用於所有其他集羣

在你的代碼創建5個標記（將羣集），所以Markerclusterer將始終使用的第一個樣式，因爲有小於10個標記。

向Markerclusterer添加更多標記，並且當羣集包含超過9個（或超過99個）標記時，也會使用其他圖標。

來源

2015-02-07 18:58:17

在MarkerClustererPlus MarkerClustererOptions的MarkerClustererPlus樣式參數不能正常工作

回答

相關問題