GMaps APIv3 InfoWindow for循环中的标记（）始终是相同的 [英] GMaps APIv3 InfoWindow for markers in loop for() is always the same

问题描述

我知道这个话题已经讨论过很多次了，但是我不能解决我的问题。
我想在我的地图上显示一些标记，每个标记都有一个点击事件。每个点击事件都应该打开一个包含一些数据的infoWindow。

这是我写的;此代码在控制台中运行时没有任何错误，所有标记都正确显示，但点击时显示的infowindow始终与所有...相同。

  //全局变量
 var info = new google.maps.InfoWindow（）; 
 
 // ...其他一些函数
 
函数createMarker（map）
 {
 for（i = 0; i< loadedMarkers.length ; i ++）{
（function（i）{
 value = loadedMarkers [i]; 
 var pos = new google.maps.LatLng（value.Latitude，value.Longitude）; 
 
 var mapOptions = {
 zoom：10，
 center：pos，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 
 var marker = new google.maps.Marker（{
 position：pos，
 map：map，
 title：value.Title 
}）; 
 
 var MarkerContent =< div class = \marker\>+ 
< h2>+ value.Title +< / h2>+ 
 < p>+ value.Text +< / p>+ 
< / div>; 
 
 info.setOptions（{
 content：MarkerContent，
 size：new google.maps.Size（50，50），
 position：pos 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 info.open（map，marker）; 
}）; 
} 
）（i）; 
 
 
 
 
 
 
我听说过一些关闭问题（我是新的与JS），所以我试图把（逻辑函数（我）...），但它总是显示所有infowindow相同的内容。
 
 
可以有人向我解释我错在哪里（为什么？）
 
 
 
非常感谢您 
 
解决方案
 
 
 
 <$ c  
 $ c $ google.maps.event.addListener（marker，'click'，function（）{
 info.setOptions（{
 content：MarkerContent 
}）; 
 info。打开（地图，标记）; 
}）; 
  
 
I know the topic has already been discussed many times, but I can't resolve my problem.
I'd like to display some markers on my map, with a click event on each of them. Each click event should open an infoWindow with some data.

Here is what I wrote ; this code runs without any error in the console, all the markers are correctly displayed, but the infowindow displayed on click is always the same for all...
//Global variable
var info = new google.maps.InfoWindow();

//... some other functions

function createMarker(map)
{
    for(i = 0 ; i < loadedMarkers.length ; i++) { 
        (function(i) {
            value = loadedMarkers[i];
            var pos = new google.maps.LatLng(value.Latitude, value.Longitude);

            var mapOptions = {
                zoom: 10,
                center: pos,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                title: value.Title
            });

            var MarkerContent = "<div class=\"marker\">" +
                                    "<h2>"+ value.Title +"</h2>" +
                                    "<p>"+ value.Text +"</p>" +
                                "</div>";

            info.setOptions({
                content: MarkerContent,
                size: new google.maps.Size(50, 50),
                position: pos
            });

            google.maps.event.addListener(marker, 'click', function () {
                info.open(map, marker);
            }); 
         }
       )(i);
    }
}
I heard about some closure problem (I'm new with JS), so I tried to put the logic in the (function(i) ...), but it always display the same content for all infowindow.

Could someone explain me where I'm wrong (and why ?)

Thanks you very much
解决方案
You need to update the content in the infowindow when it is opened (otherwise it displays the last content):
    google.maps.event.addListener(marker, 'click', function () {
        info.setOptions({
            content: MarkerContent
        });
        info.open(map, marker);
    }); 


                        
这篇关于GMaps APIv3 InfoWindow for循环中的标记（）始终是相同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！