Google Maps-标记单击时加载窗口 [英] Google Maps - load window on marker click

问题描述

我正在尝试创建一个带有多个标记的Google Map，当单击一个标记时会加载警报.

I'm trying to create a Google Map with multiple markers on it, that loads an alert when a marker is clicked.

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").多个标记不会加载多个警报框，并且在加载了初始警报框(我不希望)之后，单击标记不会执行任何操作.

In the working example, I'll pass the marker object to loadInfo() and then load an InfoWindow, but for now, I'm just trying to get the action to happen when the marker is clicked. What's actually happening is that an alert box is loading (with the '1' in it, as expected) when the map loads. Multiple markers don't load multiple alert boxes, and after the initial alert box has loaded (which I don't want) clicking the markers doesn't do anything.

非常感谢您的帮助！

推荐答案

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

In your addListener invocation, you're actually calling loadInfo instead of passing a reference to it. Try the following instead:

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

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

This will create an anonymous function which wraps your loadInfo method, calling the method when the anonymous function is executed.

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

Alternatively, if you weren't using any parameters in loadInfo, simply removing the parentheses would work too:

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

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

Something worth keeping in mind when using such function references is the scope in which it will be called. If you were to use the 'this' reference, you'll run into the situation where 'this' within the callback function will in fact not refer to the scope in which it was created, but to the scope within which it's being executed which most likely will not contain the fields or methods you're expecting to call, resulting in errors stating Undefined instead. As Jonathan points out, you'll have to use the call() and apply() methods to bind explicitly to ensure your function executes within the correct scope.

这篇关于Google Maps-标记单击时加载窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！