如何在google.maps.event.addListener中使用此工具
下面的示例可以工作,但是当我尝试传递一个参数并在函数中使用this
不起作用时。如何在google.maps.event.addListener中使用此工具
工作:
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]
了。我对此很新,所以对术语错误感到抱歉。如果有人能够帮助我,或者让我朝着正确的方向发展,那将是非常棒的。
当您在第三个参数中将参数传递给该函数时,该函数会立即执行(这就是为什么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);
}
});
}
代码片段:的
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>
感谢geocodezip这是正确的。对不起,重复的问题。 – Hubvill
我刚刚试过,'this'仍然指的是窗口而不是'markers [i]'。我尝试传递'markers [i]'作为参数,但它总是以'undefined'出现。有任何想法吗? – Hubvill
提供一个[最小,完整,测试和可读的示例](http://*.com/help/mcve),它演示了如何在[how-to-ask]中建议的问题(http://*.com/help /如何对问)。 – geocodezip
可能重复[谷歌映射addDomListener函数参数](http://*.com/questions/27791921/google-map-adddomlistener-function-parameter) – geocodezip
[如何使用Google地图事件侦听器传递变量并提交表单](http://*.com/questions/21273986/how- google.maps.event.addDomListener(window,'google-map-event-listener-to-pass-a-variable-and-submit-a-form /) – geocodezip
加载',初始化);“是什么意思?](http://*.com/questions/30960231/what-does-google-maps-event-adddomlistenerwindow-load-initialize-mean) – geocodezip