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