javascript - 谷歌地图 - 标记点击加载窗口

Question

我正在尝试创建一个带有多个标记的 Google map ，它会在点击标记时加载警报。

var map = null;
function setupMap() { 

    map = new GMap2(document.getElementById("map")); 
    map.setUIToDefault();
    map.setCenter(new GLatLng( 0, 0 ), 1); 
    map.enableDoubleClickZoom(); 

    // Create the marker icon - will be repeated for each icon but
    // truncated for brevity in example
    var icon1 = new GIcon(G_DEFAULT_ICON);
    icon1.image = "uploads/1.jpg";
    icon1.shadow = "";
    icon1.iconSize = new GSize( 50, 50 );

    var latlng = new GLatLng( 0, 0 );
    markerOptions = { icon:icon1 };     
        marker1 = new GMarker( latlng, markerOptions );
    map.addOverlay( marker1 );
    GEvent.addListener( marker1, "click", loadInfo(1) );    

} 

function loadInfo( a ) {
    alert( a );
}

window.onload = setupMap;

在工作示例中，我会将标记对象传递给 loadInfo()，然后加载一个 InfoWindow，但现在，我只是试图让操作在单击标记时发生。实际发生的是本地图加载时，警告框正在加载(如预期的那样，其中包含“1”)。多个标记不会加载多个警报框，并且在加载初始警报框(我不想要)后单击标记不会执行任何操作。

非常感谢任何帮助，谢谢!

Answer 1

在您的 addListener 调用中，您实际上是在调用 loadInfo 而不是传递对它的引用。请尝试以下操作:

GEvent.addListener( marker1, "click", function() { 
  loadInfo(1); 
});    

这将创建一个匿名函数来包装您的 loadInfo 方法，并在执行匿名函数时调用该方法。

或者，如果您没有在 loadInfo 中使用任何参数，只需删除括号也可以:

GEvent.addListener( marker1, "click", loadInfo);    

在使用此类函数引用时，需要牢记的一点是它将被调用的范围。如果您要使用 'this' 引用，您会遇到这样的情况:回调函数中的 'this' 实际上不会引用其中的范围它已创建，但在执行它的范围内很可能不包含您期望调用的字段或方法，从而导致错误声明 Undefined 。正如 Jonathan 指出的那样，您必须使用 call() 和 apply() 方法来显式绑定(bind)以确保您的函数在正确的范围内执行。