如何在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>