Question

我一直遇到问题，没有任何谷歌搜索引出答案。我正在构建一个使用谷歌地图的网络应用程序，并在初始化地图后不断出现竞争条件错误。我正试图在页面加载时获取地图的边界，因此我可以使用这些边界从我的API获取数据。问题是我在20％的时间内得到了不正确的界限。

我想弄清楚的主要事情是：

当地图初始化时，我可以正确使用它吗？
是否有流体地图容器导致问题？
由于某种原因，angular.js会导致问题。

地图已分配给名为map-canvas的div，该div位于绝对定位的map-container

内

#map-container{
    position:absolute;  
    background-color:#DDD;
    top:0px;
    bottom:0px;
    left:450px;
    right:0px;
}

#map-canvas{
    width:100%;
    height:100%;
}

我正在使用jQuery的$(function(){})方法在页面加载时收到通知。然后我调用我的initMap（）函数来初始化地图，其中已经定义了myLatLng。为了检测地图的初始化时间，我正在添加一个“空闲”监听器。自动平均部分用于检测用户何时正在拖动地图。

$scope.initMap = function(){        
    var mapOptions = {
        center: myLatLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false
    };

    $scope.map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);            

    google.maps.event.addListener($scope.map, 'idle', function() {                      
        if($scope.autoPanning){
            $scope.autoPanning = false;
        }else{
            $scope.getStories();
        }
    });     
};

在我的getStories()方法中，我获得了地图的边界，因此我可以向我的服务提交查询。问题是latitude_1将等于纬度_2，基本上给我一条线而不是一个框作为边界。这就是我目前要抓住并修复错误的方法：

var bounds = map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var bounds = {
        latitude_1 : ne.lat(),
        longitude_1 : ne.lng(),
        latitude_2 : sw.lat(),
        longitude_2 : sw.lng()
    };


if(bounds.latitude_1 == bounds.latitude_2){
    line("---caught invalid map event---------------------");

    google.maps.event.trigger($scope.map, 'resize');

    setTimeout(function(){
        google.maps.event.trigger($scope.map, "resize");            
        $scope.map.setCenter(myLatlng);  
    }, 1000);

    return;
}

我在大约20％的时间里发现无效的纬度问题，这真的令人沮丧。任何人都可以在这个问题上发光吗？

Answer 1

我终于弄明白了问题所在。这是基于我对$(document).ready和$(window).load的误解：

当DOM准备好进行交互时，会激活

$(document).ready。

$(window).load在加载所有页面资源时触发。

所以window.load发生在document.ready之后。我在document.ready事件上初始化我的应用程序，当谷歌地图资产没有完全加载时。我将初始化代码切换到window.load事件上，现在可以正常工作。

加载Google地图中的竞争条件

1 个答案: