地圖不顯示第一次在屏幕

以下HTML代碼加載一個谷歌地圖輸入：地圖不顯示第一次在屏幕

<div> Map : 
    <div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px" data-tap-disabled="true" ng-init="initMap()"> </div> 
</div>

它指的是角的代碼：

// initialization of the map 
$scope.initMap = function() { 
    $ionicLoading.show({   
      template: '<p>Loading...</p><ion-spinner icon="spiral" class="spinner-balanced"></ion-spinner>' 
     }) 
    $scope.googleMap().then(function(results){ 


     var latLng = results.latLng; 
     var map = results.map; 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      visible:true, 
      Map: map, 
      Icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'  //personalize with icon 
     }); 

     $timeout(function(){ 
      alert('timeout') 
      $scope.$apply(); 
      $ionicLoading.hide(); 
     }) 

    }) 
} 

$scope.SetLatLong = function(){ 
    var deferred = $q.defer() 
    alert('coords'+$scope.lat+'--'+$scope.long) 
    // geo coordinates 
    if($scope.lat!=undefined && $scope.long!=undefined){ 
     var latLng = new google.maps.LatLng($scope.lat, $scope.long); 
     alert('lat'+JSON.stringify(latLng)) 
     deferred.resolve(latLng); 

     return deferred.promise 
    } else { 
     alert('latelse') 
     var latLng = new google.maps.LatLng(51.5074, 0.1278)//London 
     deferred.resolve(latLng); 

     return deferred.promise 
    } 


} 

$scope.SetMapOptStyle = function(latLng){ 
    var deferred1 = $q.defer() 
    var mapOptions = { 
     center: latLng, 
     zoom: 17, 
     disableDefaultUI: true, 
     clickableIcons: false, 
     disableDoubleClickZoom: true, 
     draggable: false, 
     keyboardShortcuts: false, 
    }; 

    var styledMapType = new google.maps.StyledMapType(
     [{ 
      stylers: [ 
       { hue: '#00ffe6' }, 
       { saturation: -20 } 
      ] 
     },{ 
      featureType: 'road', 
      elementType: 'geometry', 
      stylers: [ 
       {lightness: 100 }, 
       {visibility: 'simplified' } 
      ] 
     },{ 
      featureType: 'road', 
      elementType: 'labels', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }],{ 
      name: 'Styled Map'} 
    ); 
    deferred1.resolve([mapOptions,styledMapType]) 
    return deferred1.promise 
} 

// initialization of the map 
$scope.googleMap = function() { 
    alert('googleMap') 



    // initilization of variables 
    var deferred = $q.defer() 
    var map1; 
    var latLng; 
    var mapOptions; 
    var styledMapType;  


    return $scope.SetLatLong().then(function(res){ 
     latLng = res 
     return $scope.SetMapOptStyle(latLng).then(function(res1){ 
      mapOptions = res1[0] 
      styledMapType = res1[1] 

      // map creation 
      map1 = new google.maps.Map(document.getElementById('map'), mapOptions);  

      // other options associated to the map style 
      map1.mapTypes.set('styled_map', styledMapType); 
      map1.setMapTypeId('styled_map'); 

      // promise output 
      var results = {'map':map1,'latLng':latLng} 
      //alert('map--'+JSON.stringify(map1)) 
      //alert('latlong--'+JSON.stringify(latLng)) 
      deferred.resolve(results); 
      //return deferred.promise 
      return results 
     }) 
    }) 
}

問題是在第一時間我加載屏幕。看起來，地圖加載在前一個屏幕的$範圍內，因此當屏幕加載時，地圖缺失。但是，如果我刷新頁面地圖正確加載在頁面中（所以在$範圍內）。也許'document.getElementById（'map'）'是指刷新前的當前頁面？任何想法？

來源

2016-09-29 ai20

我找到了解決方案：調用地圖頁面的屏幕包含自己的地圖。在這兩頁既映射指向同一個DIV ID，如：

<div> Map : 
<div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px" data-tap-disabled="true" ng-init="initMap()"> </div>

所以ID =在兩個屏幕 '地圖'。我確實在兩個屏幕之一中將id更改爲'map_edit'，現在地圖顯示正確（還需要相應地更改document.getElementById（'div_id'））。我認爲這個問題是由於在調用映射函數initMap之後刷新了頁面。

來源

2016-09-30 10:54:26 ai20

地圖不顯示第一次在屏幕

回答

相關問題