動態添加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));