Google Maps API - 数组和InfoWindows存在问题 [英] Google Maps API - Trouble with Arrays and InfoWindows

问题描述

对不起，如果这是微不足道的，但我是新来的JS，并已在这个问题几个小时无济于事。

  function initialize（）{
 geocoder = new google.maps.Geocoder（）; 
 var latlng = new google.maps.LatLng（-34.397,150.644）; 
 var myOptions = {
 zoom：12，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map = new google .maps.Map（document.getElementById（map_canvas），myOptions）; 
} 
 
 var markersArray = []; 
 var infowindowArray = []; 
 
函数addMarker（location）{
 marker = new google.maps.Marker（{
 position：location，
 map：map 
}）; 
 markersArray.push（marker）; 
} 
 
函数addInfowindow（string）{
 infowindow = new google.maps.InfoWindow（{content：string}）; 
 infowindowArray.push（infowindow）; 
} 
 
函数findvenues（latitudelong）{
 $ .get（venuefinder.php，{latlong：latitudelongitude.Ka +，+ latitudelongitude.La}，function （myObject.response.venues中的x）{
 var latlonglocation = new google.maps。 LatLng（myObject.response.venues [x] .location.lat，myObject.response.venues [x] .location.lng）; 
 addMarker（latlonglocation）; 
 addInfowindow（myObject.response.venues [ x] .name）; 
 google.maps.event.addListener（markersArray [x]，'click'，function（）{infowindowArray [x] .open（map，markersArray [x]）;}）; 
 console.log（markersArray [x]，infowindowArray [x]）; 
} 
}）; 
  

当调用findvenues时，应该添加infowindow点击事件。当我单击图标时，infowindows数组中最后一个元素的infowindow始终打开。

但是，如果我手动输入以下代码，它将起作用：

  google.maps.event.addListener（markersArray [0]，'click'，function（）{infowindowArray [0]。开放（地图，markersArray [0]）;}）; 
 google.maps.event.addListener（markersArray [1]，'click'，function（）{infowindowArray [1] .open（map，markersArray [1]）;}）; 
  

我需要这个动态，尽管...我做错了什么？

解决方案

将该调用更改为addListener中的循环：

  google.maps.event.addListener（markersArray [x]，'click'，function（）{infowindowArray [ X]。开（地图，markersArray [X]）;}）; b 
 
 
 
 
 
  google.maps.event.addListener（markersArray [x]，'click'，（function（x）{
 return function（）{
 infowindowArray [x] .open（map ，markersArray [x]）; 
} 
}）（x））; 
  

通过引入另一个函数，您可以创建一个全新的作用域。这会冻结您传入的x的值，以便返回的函数（换句话说，将传递到Google API的实际处理函数）可以访问它自己的x，与所有其他处理程序在该循环中建立。

如果不这样做，则所有处理程序共享完全相同的小x ，那显然不会这样。

编辑—还有其他方法可以做到这一点。你可以把这个额外的函数写成一个完全独立的东西：

$ p $ 函数makeMapListener（window，map，markers）{
返回函数（）{window.open（map，markers）; };
}


然后，循环中的语句如下所示：

  google.maps.event.addListener（markersArray [x]，'click'，makeMapListener（inforwindowArray [x]，map，markersArray [x]）） ; 
  

它的重要部分是复制在循环过程中变化的变量在构造处理函数之前。

Sorry if this is trivial, but I am new to JS and have been at this problem for a few hours to no avail.

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

var markersArray = [];
var infowindowArray = [];

function addMarker(location) {
    marker = new google.maps.Marker({
    position: location,
    map: map
    });
    markersArray.push(marker);
}

function addInfowindow(string) {
    infowindow = new google.maps.InfoWindow({content: string});
    infowindowArray.push(infowindow);
}

function findvenues(latitudelongitude) {
$.get("venuefinder.php", { latlong:latitudelongitude.Ka+","+latitudelongitude.La }, function(data){
    var myObject = eval('(' + data + ')');
    for(x in myObject.response.venues){
        var latlonglocation = new google.maps.LatLng(myObject.response.venues[x].location.lat,myObject.response.venues[x].location.lng);
        addMarker(latlonglocation);
        addInfowindow(myObject.response.venues[x].name);
        google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});
        console.log(markersArray[x],infowindowArray[x]);
    }
});

When findvenues is called, the infowindow click events should be added. When I click the icons, the same infowindow of the last element in the array of infowindows always opens.

However, if I manually enter in the following code, it works:

google.maps.event.addListener(markersArray[0], 'click', function() {infowindowArray[0].open(map,markersArray[0]);});
google.maps.event.addListener(markersArray[1], 'click', function() {infowindowArray[1].open(map,markersArray[1]);});

I need this to be dynamic though... What am I doing wrong? Let me know if the question is unclear and I will try my best to clarify.

解决方案

Change that call to "addListener" in the loop:

      google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});

to this:

      google.maps.event.addListener(markersArray[x], 'click', (function(x) {
        return function() {
          infowindowArray[x].open(map,markersArray[x]);
        }
      })(x));

By introducing another function like that, you create a whole new scope. That "freezes" the value of "x" you pass in so that the returned function (the actual handler function that'll be passed in to the Google API, in other words) has access to its very own "x", separate from all the other handlers established in that loop.

If you don't do that, then all the handlers share the exact same little "x", and that clearly won't do.

edit — there are other ways to do this. You could write that extra function as a totally separate thing:

function makeMapListener(window, map, markers) {
  return function() { window.open(map, markers); };
}

Then the statement in your loop would look like:

google.maps.event.addListener(markersArray[x], 'click', makeMapListener(inforwindowArray[x], map, markersArray[x]));

The important part of it is to make a copy of the variable(s) that change during the loop before constructing the handler function.

这篇关于Google Maps API - 数组和InfoWindows存在问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！