Question

我希望能够取消GMAP上相同地理位置上的标记在使用OverlappingMarkerSpiderfier而不是鼠标单击事件时加载页面。原因是电视上的地图显示没有点击事件。

以下是我工作的代码：

<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

您可以使用重叠标记Spiderfier的markersNearAnyOtherMarker()功能获取一组标记，检索数组的最后一个标记，并在最后一个标记上触发点击事件，以编程方式打开您的标记组。代码的相关部分是

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,output

中找到

我希望这有帮助！

在Gmap上使用OverlappingMarkerSpiderfier时，如何在页面加载时取消标记

1 个答案: