Question

我正在开发一个使用google maps api的小型网络应用程序。

有一次，我想放置标记并附加事件监听器。

//initialization of infowindow and markers
var points = [];
var infowindow = new google.maps.InfoWindow({
    content: "1234"
});

function addInfoWindow(point){
    infowindow.setContent(point.position + " " + point.title),
    infowindow.open(map, point);
}

当我用

启动标记时，问题就出现了

//initialize markers
{% for marker in mapMarkers %}
    points[{{ marker.id }}] = new google.maps.Marker({
        position: new google.maps.LatLng({{ marker.geometry.y }},
            {{ marker.geometry.x }}),
        map: map,
        title: '{{ marker.name }}',
        clickable: true
    });

    //add event llistener for infowindow
    points[{{ marker.id }}].content = "abc"
    //look here!!
    google.maps.event.addListener(points[{{ marker.id }}], 'click',
        addInfoWindow(points[{{ marker.id }}])
    );
{% endfor %}

它会立即从第一个标记显示infowindow。放置了其他标记，但点击它们永远不会产生任何变化。

如果我这样做的话

    google.maps.event.addListener(points[{{ marker.id }}], 'click',
    function(){
        addInfoWindow(points[{{ marker.id }}])
    });

填充效果非常好，只有在单击标记时才会出现信息。

我的问题：为什么需要使用

function(){}

而不是直接使用addInfoWindow。我认为这可能是函数调用的问题，其中addInfoWindow调用全局变量，但如果是这样的话，那么显示的infowindow应显示实例化的最后一个标记的信息吗？

Answer 1

因为您需要将一个函数指定为单击处理程序 - 并且您使用...

google.maps.event.addListener(points[{{ marker.id }}], 'click',
function(){
    addInfoWindow(points[{{ marker.id }}])
});

...因为这将创建一个匿名函数（在其正文中调用addInfoWindow）。

但有了这个......

google.maps.event.addListener(points[{{ marker.id }}], 'click',
    addInfoWindow(points[{{ marker.id }}])
);

...您尝试将addInfoWindow调用的结果指定为事件处理程序，而不是函数本身。当然，它不起作用。

javascript中的函数调用

1 个答案: