Question

或者至少我认为这是一个范围问题，如果我错了，请纠正我。

我有一个for循环，可以在我的地图上生成标记。每个infowindow使用回调函数加载不同的内容到ajax函数。

我简化了这个示例以概述问题。

var xhr = "";
var infowindow = new google.maps.InfoWindow();
var marker, i;
var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
                           new google.maps.LatLng(-0.829439, -91.112473),
                           new google.maps.LatLng(15.066156, -23.621399),
                          ]


function createHttpRequest() {
    try {   
        xhr = new XMLHttpRequest();
        return xhr;
        }
        catch (e)
        {
            //assume IE6
            try {
            xhr = new activeXBbject("microsoft.XMLHTTP");
            return xhr;
            }
            catch (e)   {
                return alert("Unable to create an XMLHttpRequest object");
            }
        }
}



  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(78.782762,17.917843),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
        map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  }



//I recreated the polylineCoordinates array (see above)
//to try and replicate and real array in the script

for (i = 0; i < polylineCoordinates.length; i++) {
    marker = new google.maps.Marker({
        position: polylineCoordinates[i],
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent("<div id=\"infowindow\">" + getStationInfo(infoWindowDiv) + "</div>");
            infowindow.open(map, marker);

        }
    })(marker, i));

} //End adding markers loop


            function infoWindowDiv(stationInfo) {
                var add = document.createTextNode(stationInfo);
                document.getElementById("infowindow").appendChild(add);
            }


            function getStationInfo(callback) {
                //createHttpRequest() exists globally
                var xhr = createHttpRequest();
                var url = "stations.php" //edited out the original URL
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var stationInfo = "This is a Test";
                        return callback(stationInfo)
                    } //end readyState

                } //end readystatechange
                xhr.open("GET", url, true);
                xhr.send(null);
            } //end getStationInfo

小编辑：移动循环外的函数

编辑2： ajax调用没有任何问题，为了示例代码编辑了url。注意最终输出在infowindow中显示“This is a test”，它清楚地表明已成功执行回调。此外，请注意没有responseText或responseXml。发回的变量与url

无关

回调工作正常，但出于某种原因，它顶部带有可怕的“未定义”。
控制台什么也没显示输出：

undefined
This is a test

我做错了什么？如果它有效，怎么会不确定？

Answer 1

发生了什么：

点击infowindow
getStationInfo（infoWindowDiv）被调用，触发一个AJAX请求，但没有返回任何有用的东西（“未定义”，没有返回语句）
AJAX函数会遇到错误（url“此时不必要”不会导致onreadystatechange函数触发）。但是你告诉我们这不是问题。
脚本遇到javascript错误Uncaught TypeError: Cannot call method 'appendChild' of null，因为id为infowindow的div尚未附加到DOM。

建议在infowindow上添加一个事件监听器，不要尝试访问id =“infowindow”的div，直到它被渲染（domready）。

工作代码：

    var xhr = "";
    var infowindow = new google.maps.InfoWindow();
    var map = null;
    var marker, i;
    var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
                               new google.maps.LatLng(-0.829439, -91.112473),
                               new google.maps.LatLng(15.066156, -23.621399)
                              ]


      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(78.782762,17.917843),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

    for (i = 0; i < polylineCoordinates.length; i++) {
        marker = new google.maps.Marker({
            position: polylineCoordinates[i],
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent("<div id=\"infowindow\" style=\"height:50px;width:200px;\"></div>");
                infowindow.open(map, marker);
            google.maps.event.addListenerOnce(infowindow,"domready", function(){
                  getStationInfo(infoWindowDiv);
                });
        })(marker, i));

    } //End adding markers loop

    }
            function infoWindowDiv(stationInfo) {
                var add = document.createTextNode(stationInfo);
                document.getElementById("infowindow").appendChild(add);
            }


            function getStationInfo(callback) {
                var stationInfo = "This is a Test";
                callback(stationInfo)
            } //end getStationInfo

    google.maps.event.addDomListener(window, 'load', initialize);

在Infowindow中调用AJAX：范围问题

1 个答案: