Google Maps API fitBounds 导致 0,0 位置答案

【问题标题】：Google Maps API fitBounds resulting in 0,0 locationGoogle Maps API fitBounds 导致 0,0 位置
【发布时间】：2012-11-16 11:31:59
【问题描述】：

我正在尝试使用以下代码行来使地图边界适合标记：

var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(latlng);    
map.fitBounds(latlngbounds);

由于某种原因，地图会缩放到地图上的位置 0,0。

更新 1： 似乎可以在 IE9 中运行，但不能在 Chrome 中运行。在 Chrome 开发者模式下得到如下错误信息：Port error: Could not establish connection. Receiving end does not exist.

更新 2：在 IE9 中重新加载页面后，它也停止工作。

这是我的代码。我一定是做错了什么？

//variables
var map;
var markers = [];
var latlngbounds;
//initialize google map
function initialize()
{
    var myOptions = {
        center: new google.maps.LatLng(-26.17706, 28.34613),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP};

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    latlngbounds = new google.maps.LatLngBounds();

    //display markers
    updateMarkersDisplayed(); 
}

//displays google map after site load complete
google.maps.event.addDomListener(window, 'load', initialize);

//retrieves markers for map
function updateMarkersDisplayed()
{
    //php get url
    var searchUrl = 'getCoords.php';

    downloadUrl(searchUrl, function(data) {
        var xml = parseXml(data);   
        var markerNodes = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markerNodes.length; i++) {
            var id = markerNodes[i].getAttribute("device_id");
            var latlng = new google.maps.LatLng(
                parseFloat(markerNodes[i].getAttribute("lat")),
                parseFloat(markerNodes[i].getAttribute("lng")));

            createMarker(latlng, id);      
            latlngbounds.extend(latlng);    
        }
    }); 
    //zoom map to display all markers
    map.fitBounds(latlngbounds);    
}

//create marker and display on map if not already visible
function createMarker(latlng, id) {      

    var iconUrl = 'images/phones.png';              
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: id,
        icon: iconUrl
    });     

    markers.push(marker);   
    markers[markers.length-1].setMap[map];

}

//download xml file containing markers specified by the GET parameters contained in the url passed
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.responseText, request.status);
        }
    };

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

//parse text returned by php script
function parseXml(str) {
    if (window.ActiveXObject) 
    {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
    } 
    else if (window.DOMParser) 
    {
        return (new DOMParser).parseFromString(str, 'text/xml');
    }
}

//capture extra XMLHttpRequest responses
function doNothing() {}

【问题讨论】：

标签： javascript google-maps google-maps-api-3 fitbounds

【解决方案1】：

以 0,0 为中心的 google.maps.LatLngBounds 是空边界的症状。

您正在使用 XML 作为标记数据。不工作的浏览器可能不喜欢您的 XML，请尝试将这些浏览器直接指向 XML 提要并修复报告的任何问题。

【讨论】：

我的 XML 提要没有问题。边界怎么可能是空的？ Chrome 报告的另一条错误消息与此无关。

【解决方案2】：

必须将 map.fitBounds(latlngbounds); 移动到 downloadUrl(searchUrl, function(data) { 函数中，因为在 XML 下载完成之前调用了 fitBounds。

    downloadUrl(searchUrl, function(data) {
        var xml = parseXml(data);   
        var markerNodes = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markerNodes.length; i++) {
            var id = markerNodes[i].getAttribute("device_id");
            var latlng = new google.maps.LatLng(
                parseFloat(markerNodes[i].getAttribute("lat")),
                parseFloat(markerNodes[i].getAttribute("lng")));

            bounds.extend(latlng);      
            createMarker(latlng, id);           
        }
        //zoom map to display all markers
        map.fitBounds(bounds);
    });

【讨论】：