动态添加InfoWindows和标记谷歌地图V3

Question

我有一个非常恼人的谷歌地图V3 JavaScript API的问题。但问题可能与我的JavaScript代码有关。

这里是我的完整代码：

<script> 
    var __mvcGoogleMap; 
    var __mvcGeocoder; 
    var markersArray = []; 
    var infoWindowsArray = []; 

    function _initializeGoogleMap() { 

     __mvcGeocoder = new google.maps.Geocoder(); 

     var latlng = new google.maps.LatLng(38.98569417582484, 35.351452857849154); 

     var myOptions = { 
      zoom: 6, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.HYBRID, 
      panControl: true, 
      zoomControl: true, 
      mapTypeControl: true, 
      scaleControl: true, 
      streetViewControl: false, 
      overviewMapControl: true 
     }; 
     __mvcGoogleMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    function findOnMap() { 

     var srchVal = $("#txtMapSearch").val(); 

     __mvcGeocoder.geocode({'address': srchVal}, function(results, status) { 

      if (status == google.maps.GeocoderStatus.OK) { 

       actionURL = '/accommodation/HotelsForMap'; 
       actionData = 'lat=' + results[0].geometry.location.lat() + '&lng=' + results[0].geometry.location.lng(); 

       var _latLongs = []; 
       var _infoWindows = []; 

       $.ajax({ 
        type: "POST", 
        url: actionURL, 
        data: actionData, 
        success: function (r) { 

         if (markersArray) { 
          for (i in markersArray) { 
           markersArray[i].setMap(null); 
          } 
          markersArray.length = 0; 
         } 

         for (var i = 0; i < r.length; i++) { 

          _latLongs.length = 0; 
          _infoWindows.length = 0; 

          _latLongs[i] = new google.maps.LatLng(r[i].LatLong.Latitude, r[i].LatLong.Longitute); 

          addMarker(_latLongs[i], r[i].Title); 
          addInfoWindow(r[i].InfoWindow.Content, markersArray[i]); 
          google.maps.event.addListener(markersArray[i], 'click', function() { 

           infoWindowsArray[i].open(__mvcGoogleMap, markersArray[i]); 
          }); 
         } 

         var _currentPossition = results[0].geometry.location; 
         __mvcGoogleMap.setCenter(_currentPossition); 
         __mvcGoogleMap.setZoom(14); 
        } 
       }); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 

    function addMarker(location, title) { 
     marker = new google.maps.Marker({ 
      position: location, 
      title: title, 
      map: __mvcGoogleMap, 
      draggable: false 
     }); 

     markersArray.push(marker); 
    } 

    function addInfoWindow(content, marker) { 

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

    $(function() { 
     $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=_initializeGoogleMap', function() { 
      $(window).load(_initializeGoogleMap); 
     }); 
    }); 

    $("#btnMapSearch").click(function() { 
     findOnMap(); 
    }); 
</script> 

这里的情况是：我所试图做的是，经过我初始化地图和搜索的地方，我得到的地方LatLang值，并将其发送到我的服务器。然后，我从我的服务器上获得一些酒店信息（名称，纬度，语言等）的结果。

然后，我将标记设置为适当的位置，并将infoWindow附加到每个标记。一切工作正常，除了infoWindows。

当我点击一个标志，我看到浏览器的控制台窗口此错误：

Uncaught TypeError: Cannot call method 'open' of undefined

能否请你看看我做错了什么在这里？

Answer 1

您将需要为值i创建一个闭包，以便在创建每个匿名函数时将其分配给封闭变量。如果没有，当你继续循环时，i的值将会改变，直到循环结束并且它保持一个值为你的数组+1的长度（这总是一个未定义的索引），并且这是i你所有的匿名函数都涉及到它。在你的AJAX回调循环中试试以下内容：

google.maps.event.addListener(markersArray[i], 'click', (function(idx) { 
    return function() { 
     infoWindowsArray[idx].open(__mvcGoogleMap, markersArray[idx]); 
    }; 
})(i));