0

放大後變爲從羣集分離的標記並不總是觸發click事件。與羣集分離的標記不會觸發MarkerClustererPlus中的單擊事件

這是我一直在使用的代碼:

<html> 
<head> 
    <style> 
     #map { 
      width: 500px; 
      height: 400px; 
     } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZWqW7aJrwxQ4MeN10zXxap5a3lHl4iAI&sensor=true"></script> 
    <script src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r354/trunk/markerclustererplus/src/markerclusterer_packed.js"></script> 
    <script> 
     jQuery(document).ready(function() { 
      var map; 
      var locations = [ 
       { 
        'lat': 51.3333, 
        'lng': 3.2833 
       }, 
       { 
        'lat': 51.209348, 
        'lng': 3.2246995000000425 
       }, 
       { 
        'lat': 51.209348, 
        'lng': 3.2246995000000425 
       }, 
       { 
        'lat': 51.2070168, 
        'lng': 3.222604400000023 
       } 
      ]; 
      var centerPosition = new google.maps.LatLng(50.944282, 3.647766); 
      var markers = []; 

      var options = { 
       zoom: 5, 
       center: centerPosition, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      map = new google.maps.Map($('#map')[0], options); 

      for (loc in locations) { 
       var latLng = new google.maps.LatLng(locations[loc].lat, locations[loc].lng); 
       var marker = new google.maps.Marker({ 
        position: latLng 
       }); 
       markers.push(marker); 
      } 
      var markerCluster = new MarkerClusterer(map, markers, { 
       averageCenter: true 
      }); 

      google.maps.event.addListener(markerCluster, "click", function (cluster) { 
       console.log("Cluster click"); 
      }); 

      google.maps.event.addListener(marker, "click", function (cluster) { 
       console.log("Marker click"); 
      }); 

     }); 
    </script> 
</head> 
<body> 
<div id="map"> 

</div> 
</body> 
</html> 

現在單擊(含4個標記)在羣集上。地圖將被放大,現在您將看到一個3個簇和一個標記。點擊單個標記不會執行任何操作(事件未被觸發)。

但是!

點擊3的簇,地圖將進一步放大。現在有一個2簇,又是一個分離的標記。點擊該標記將點擊事件

這是一個錯誤,還是我的設置有問題?

你可以找到jsfiddle here

回答

1

您創建外for循環

 google.maps.event.addListener(marker, "click", function (cluster) { 
      console.log("Marker click"); 
     }); 

標記事件監聽器。所以,創建的最後一個標記具有事件監聽器,其他編號沒有。

這應該工作:

 for (loc in locations) { 
      var latLng = new google.maps.LatLng(locations[loc].lat, locations[loc].lng); 
      var marker = new google.maps.Marker({ 
       position: latLng 
      }); 
      markers.push(marker); 

      google.maps.event.addListener(marker, "click", function (cluster) { 
       console.log("Marker click"); 
      }); 
     } 
+0

D'哦!好吧,斑點先生,謝謝! – LaundroMat