Dynamicaly在Google Maps V3上添加InfoWindows和Markers

Question

我對Google Map 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值並將其發送到我的服務器。 然后我從我的服務器返回結果，其中包含一些酒店信息（name，lat，lang等）。

然后，我將標記設置為適當的位置，並將infoWindow附加到每個標記。 除了infoWindows，一切正常。

單擊標記時，我在瀏覽器控制台窗口中看到此錯誤：

未捕獲的TypeError：無法調用未定義的方法'open'

你能看看我在這里做錯了什么嗎？

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));