使用Google地图的JavaScript中的范围和关闭问题

Question

I have a few google map markers and I am trying to add a click event to each, but for some reason, the text that gets displayed is the same for every marker :( 我有一些谷歌地图标记，我试图向每个标记添加一个点击事件，但由于某种原因，每个标记显示的文本是相同的:(

I think it is a problem with my JS closures (are closures the same thing as scope in JS?) 我认为这是我的JS闭包的问题（闭包和JS中的作用域一样吗？）

The map with markers where the problem is happening is here: http://www.comehike.com/outdoors/parks/trailhead.php 带有问题标记的地图如下： http ： //www.comehike.com/outdoors/parks/trailhead.php

What am I doing wrong in the code that I have which makes the same popup window appear for every marker? 我在代码中做错了什么，它为每个标记显示相同的弹出窗口？

Thanks, Alex 谢谢，亚历克斯

Answer 1

You're right, this is a problem with scope and closures. 你是对的，这是范围和闭包的问题。 You are defining infoWindow in the global scope and then using it inside of your onclick handler. 您正在全局范围内定义infoWindow，然后在onclick处理程序中使用它。 This means you will always open the infoWindow you created in the last iteration of your for loop. 这意味着您将始终打开在for循环的最后一次迭代中创建的infoWindow。

Change this code: 更改此代码：

infoWindow = new google.maps.InfoWindow({
  content: contentString
});

to this: 对此：

var infoWindow = new google.maps.InfoWindow({
  content: contentString
});

Answer 2

Here is a JSFiddle Demo : 这是一个JSFiddle演示：

I created a dummy array with information attached named markers. 我创建了一个虚拟数组，其中包含名为标记的信息 We then create a global variable infowindow to hold one instance of your info window. 然后，我们创建一个全局变量infowindow来保存信息窗口的一个实例。 This info window is going to pop up next to the marker that is clicked. 此信息窗口将在单击的标记旁边弹出。

var map;
var global_markers = [];    
var markers = [[37.09024, -95.712891, 'trialhead0'], [-14.235004, -51.92528, 'trialhead1'], [-38.416097, -63.616672, 'trialhead2']];

var infowindow = new google.maps.InfoWindow({});

within your markers populating for loop. 在你的标记填充循环。 Basically, instead of holding an instance of infowindow with each marker i attach the content with it, and with the onclick event when a marker is clicked i set the content of the infowindow with the content we saved and then open the infowindow next to the clicked marker: 基本上，我没有用每个标记来保存infowindow的实例，而是用它附加内容，并且当点击标记时使用onclick事件，我用我们保存的内容设置infowindow的内容，然后打开点击旁边的信息窗口。标记：

    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
        var lat = parseFloat(markers[i][0]);
        var lng = parseFloat(markers[i][1]);
        var trailhead_name = markers[i][2];

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }

Answer 3

you need to add this 你需要添加这个

 <script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false">
</script>

otherwise it will keep saying google not found. 否则它会一直说谷歌没找到。

使用Google地图的JavaScript中的范围和关闭问题

问题描述

3 个解决方案

解决方案1
2 2011-03-17 18:01:25

解决方案2
1 已采纳 2011-03-17 18:31:07

解决方案3
1 2011-07-21 11:47:32

使用Google地图的JavaScript中的范围和关闭问题

问题描述

3 个解决方案

解决方案1 2 2011-03-17 18:01:25

解决方案2 1 已采纳 2011-03-17 18:31:07

解决方案3 1 2011-07-21 11:47:32

解决方案1
2 2011-03-17 18:01:25

解决方案2
1 已采纳 2011-03-17 18:31:07

解决方案3
1 2011-07-21 11:47:32