在Gmap上使用OverlappingMarkerSpiderfier時如何取消頁面加載時的標記

Question

當使用OverlappingMarkerSpiderfier而不是鼠標單擊事件時，我希望取消對頁面加載時GMAP上相同地理位置上的標記的蜘蛛識別。 原因是地圖顯示在沒有點擊事件的電視上。

下面是我工作的代碼：

<script> 

    function initialize() {
  var gm=google.maps;
  var myLatlng = new google.maps.LatLng(20.5937, 78.9629);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var oms = new OverlappingMarkerSpiderfier(map); 
  var iw = new gm.InfoWindow();
  oms.addListener('click', function(marker, event) {
    iw.setContent(marker.desc);
    iw.open(map, marker);
  });
  oms.addListener('spiderfy', function(markers) {
    iw.close();
  });

  var locations = ["Delhi, Mumbai", "Ahemdabad","Bengluru"]

  for (var i = 0; i < locations.length; i ++) {
    var title_i = "title " + i;
    var desc_i = "desc " + i;
    var loc = new gm.LatLng(20.5937, 78.9629);
    var marker = new gm.Marker({
      position: loc,
      title: title_i,
      map: map
    });
    marker.desc = desc_i;
    oms.addMarker(marker);  
  } 
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

請幫忙！ 謝謝。

Answer 1

您可以使用重疊標記蜘蛛程序的markersNearAnyOtherMarker()函數來獲取一組標記，檢索數組的最后一個標記，並觸發最后一個標記上的click事件，以編程方式打開您的一組標記。 代碼的相關部分是

google.maps.event.addListener(map, 'idle', function(ev){
    var mm = oms.markersNearAnyOtherMarker();

    var m1 = mm.pop();
    google.maps.event.trigger(m1, 'click', {
        stop: null, 
        latLng: myLatlng
    });
});

看下面的示例並運行它

 var map; function initMap() { var gm=google.maps; var myLatlng = new google.maps.LatLng(20.5937, 78.9629); var mapOptions = { zoom: 4, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var oms = new OverlappingMarkerSpiderfier(map); var iw = new gm.InfoWindow(); oms.addListener('click', function(marker, event) { iw.setContent(marker.desc); iw.open(map, marker); }); oms.addListener('spiderfy', function(markers) { iw.close(); }); var locations = ["Delhi, Mumbai", "Ahemdabad","Bengluru"] for (var i = 0; i < locations.length; i ++) { var title_i = "title " + i; var desc_i = "desc " + i; var loc = new gm.LatLng(20.5937, 78.9629); var marker = new gm.Marker({ position: loc, title: title_i, map: map }); marker.desc = desc_i; oms.addMarker(marker); } google.maps.event.addListener(map, 'idle', function(ev){ var mm = oms.markersNearAnyOtherMarker(); var m1 = mm.pop(); google.maps.event.trigger(m1, 'click', { stop: null, latLng: myLatlng }); }); } 

 #map-canvas { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } 

 <div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script> 

jsbin上也提供了此示例： http ://jsbin.com/sayude/edit?html，輸出

我希望這有幫助！