在随机PC上刷新后无法加载Google Map API

时间:2018-03-14 02:22:02

标签: angularjs google-maps google-maps-api-3

谷歌地图在我的电脑上加载得很好,即使我刷新页面或硬刷新它,但当有人访问它时,它会在刷新地图所在的页面后加载。我不认为这是一个关于加载问题的页面,因为我已经使用此代码将问题困在了

//---This condition traps google map API loading conflict with the page onload
if(isPageLoaded){
    //--Executes directly if page has already been loaded
    initializeMap($scope, $timeout, $cookies, $pageViewCtrl);
}else{
    //--If page was not yet loaded, Waits for the page to be ready, then initialize map
    document.addEventListener('readystatechange', function docStateChange(e) {

        if (e.target.readyState == 'complete') {
            e.target.removeEventListener('readystatechange', docStateChange);

            //console.log("Page is ready.");
            initializeMap($scope, $timeout, $cookies, $pageViewCtrl);

            isPageLoaded = true;
        }
    });
}

内部初始化地图

function initializeMap($scope, $timeout, $cookies, $pageViewCtrl)
{
    var branchlong, branchlat;
    branchlong = $cookies.get(LONGITUDE);
    branchlat = $cookies.get(LATITUDE);

    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map"),
        {
            zoom: 13,
            center: new google.maps.LatLng(parseFloat(branchlat),parseFloat(branchlong)),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            fullscreenControl: false
        });

    google.maps.event.addListenerOnce(map, 'idle', function(){
        // do something only the first time the map is loaded
        isMapInitialized = true;
    });

    google.maps.event.addListener(map.getStreetView(),'visible_changed',function(){
        //Street View listener codes here
    });
};

我做了一些观察。我让其他队友访问该页面并刷新它。有些载荷很好,有些载荷不好。知道为什么会这样吗?

1 个答案:

答案 0 :(得分:0)

好的,似乎问题出现在eventlistener readystatechange上。 它不会在某些浏览器上触发。

我所做的是使用替代方法,这是一种更简单的方法。 在我的控制器中,我将代码放在scope

$scope.mapInitiator = function() {
  initializeMap($scope, $timeout, $cookies, $pageViewCtrl);
}

然后在我的HTML

<div id="map" ng-init="mapInitiator()"></div>