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

在Google Maps V3上动态添加InfoWindows和Markers

1 个答案: