发送额外的参数在谷歌地图事件功能

Send additional parameters in a google maps event function

本文关键字：谷歌地图 事件 功能 参数      更新时间：2023-09-26

我有这个，工作得很好:

google.maps.event.addListener(marker, 'rightclick', function(event) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

但是我想这样做:

google.maps.event.addListener(marker, 'rightclick', deleteMarker);
function deleteMarker(marker) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

marker它目前不在范围内，有一种方法可以将标记对象作为参数发送?

marker没有超出作用域，marker 是将执行处理程序的作用域。

通过addListener添加的处理程序的范围始终是侦听器添加到的对象(addListener的第一个参数，在您的代码中是marker)

只需使用this来访问处理程序中的标记:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map-canvas"), {
      center: new google.maps.LatLng(0, 0),
      zoom: 1
    }),
    marker = new google.maps.Marker({
      map: map,
      position: map.getCenter()
    });
  google.maps.event.addListener(marker, 'rightclick', deleteMarker);
}
function deleteMarker() {
  this.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

但是，当您不想传递额外的参数给处理程序时，也可以使用deleteMarker.call(或deleteMarker.apply)

的例子:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map-canvas"), {
      center: new google.maps.LatLng(1, 2),
      zoom: 1
    }),
    marker = new google.maps.Marker({
      map: map,
      position: map.getCenter()
    }),
    var1 = "it ",
    var2 = "work's";
  google.maps.event.addListener(marker, 'rightclick',
    function(e) {
      deleteMarker.call(this, //the scope of the handler...the marker
        e, //the original event
        var1, //additonal argument
        var2 //another argument
      );
    }
  );
}
function deleteMarker(event, v1, v2) {
  this.setMap(null);
  alert(v1 + v2 + '@' + event.latLng)
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

这是因为您已经用event参数覆盖了marker。

试试这个…

google.maps.event.addListener(marker, 'rightclick', deleteMarker);
function deleteMarker(event) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

如果你需要传递多个参数，你可以这样做…

google.maps.event.addListener(marker, 'rightclick', function(event) {
  deleteMarker(event, marker);
});
function deleteMarker(event, marker) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

我建议你用通用函数来构建你的应用程序，比如删除标记。有时，您可能希望同时删除标记列表，或者出于其他原因删除标记，而不是右键单击。为此，创建一个处理所有(或大多数)情况的函数比重复代码更好。

google.maps.event.addListener(marker, 'rightclick', function(e){
    deleteMarkers([marker]);
});
function deleteMarkers(markers) {
    for (var i=0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
});

参见doc: https://developers.google.com/maps/documentation/javascript/events#EventArguments

相关文章：