javascript - 如何在 google.maps.event.addListener 中使用它

Question

以下示例有效，但是当我尝试传递参数并在函数中使用 this 时，该示例无效。

工作:

google.maps.event.addListener(markers[i], 'click', showInfoWindow);

      function showInfoWindow() {

          var service_marker = this;
          service.getDetails({placeId: service_marker.placeResult.place_id},
          function(place, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
              return;
            }

          });
        }

当我尝试使用以下代码传递参数 service_obj 时。它不起作用，并显示错误 Uncaught TypeError: Cannot read property 'place_id' of undefined。

    google.maps.event.addListener(markers[i], 'click', showInfoWindow(service_obj));

      function showInfoWindow(service_obj) {

          var service_marker = this;
          service.getDetails({placeId: service_marker.placeResult.place_id}, //error here
          function(place, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
              return;
            }

          });
        }

我相信 this 不再引用实例 markers[i]。我对此很陌生，对于术语错误，我深表歉意。如果有人能帮助我或引导我朝着正确的方向前进，那就太好了。

Answer 1

当你在第三个参数中传递一个参数给函数时，函数会立即执行(这就是为什么 this 不是你所期望的)并且返回值被用作事件处理程序功能。您可以使用匿名函数来允许您调用带参数的函数:

google.maps.event.addListener(marker, 'click', function (evt) { // the click event function is called with the "event" as an argument
    showInfoWindow(evt, this, service, map, infowindow);
});

function showInfoWindow(evt, service_marker, service, map, infowindow) {
  service.getDetails({
      placeId: service_marker.placeResult.place_id
    }, 
    function (place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        infowindow.setContent(place.name);
        infowindow.open(map, service_marker);
      } else {
        infowindow.setContent("error: "+status);
        infowindow.open(map,service_marker);
      }
    });
}

proof of concept fiddle

代码片段:

var markers = [];
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);

  service.nearbySearch({
    location: map.getCenter(),
    radius: 50000,
    keyword: "restaurant"
  }, function(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < results.length; i++) {
        var marker = createMarker(results[i], service, map, infowindow);
        bounds.extend(marker.getPosition());
      }
      map.fitBounds(bounds);
    }
  });
}

function createMarker(place, service, map, infowindow) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  marker.placeResult = place;

  google.maps.event.addListener(marker, 'click', function(evt) { // the click event function is called with the "event" as an argument
    showInfoWindow(evt, this, service, map, infowindow);
  });
  return marker;
}

function showInfoWindow(evt, service_marker, service, map, infowindow) {
  service.getDetails({
      placeId: service_marker.placeResult.place_id
    }, //error here
    function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        infowindow.setContent(place.name);
        infowindow.open(map, service_marker);
      } else {
        infowindow.setContent("error: " + status);
        infowindow.open(map, service_marker);
      }

    });
}

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

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>