使用 Google Maps Api V3 传递 xml 结果

Question

在使用 google maps api v3 时，我在尝试传递 xml 文件以填充地图上的结果时遇到了问题。 我检查了 php 文件以查看 xml 文件是否正在正确生成，并且它正在工作。 php 文件与我的 html 文件位于同一目录中。 我认为它在名为 downloadUrl 的函数中失败了。我在调试 request.readyState 时它返回的状态是 0，然后是 1。它似乎永远不会进入 request.readyState == 4。我在这里做错了吗？

传入 searchLocationsNear 的数据是正确的。 center的值为：results[0].geometry.location。

下面是两个函数：

function searchLocationsNear(center) {
        var radius = document.getElementById('radiusSelect').value;
        var st = document.getElementById('studyTopicSelect').value;
        /*http://www.icliqz.com/Dev/phpsqlsearch_genxml.php?lat=41.7636111&lng=-72.6855556&lat=41.7636111&radius=20&studytopic=GMAT*/

        var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() 
                        +'&lat=' + center.lat() + '&radius=' + radius + '&studytopic=' +st;

        //Fails here. xml file not loading after it's generated.
        downloadUrl(searchUrl, function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var username = markers[i].getAttribute("username");
            var studytopic = markers[i].getAttribute("studytopic");
            var distance = markers[i].getAttribute("distance");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                var html = "<b>" + username + "</b> <br/>" + studytopic;
                var icon = customIcons[type] || {};
                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    shadow: icon.shadow
                });
            bindInfoWindow(marker, map, infoWindow, html);
        }
        });
    }

第二个：

function downloadUrl(url,callback) {
    var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
        else if (request.readyState == 1) {
            request_loading();
        }
    };

    request.open('GET', url, true);
    request.send(null);
}

function request_loading() {
    $('#loading').html('<p><img src="/ing/loading.gif" width="43" height="11" /></p>');
    //$('#loading').load("/examples/ajax-loaded.html");
}

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    });
}

Answer 1

您正在使用 jQuery - 我建议您只使用 jquery 函数来执行 AJAX 请求，$.get() 或 $.ajax()。使用 error() 和 complete() 回调方法应该可以更轻松地调试问题所在。