谷歌地图不能在离子视图中呈现

Question

我有一个加载谷歌地图的控制器，它在第一次调用视图/控制器时起作用，但当您导航回页面时，谷歌地图不会被重新调整。

Controller.js

.controller('LoginCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk, $ionicLoading) { 
    $scope.$parent.clearFabs(); 
    $scope.isExpanded = true; 
    $timeout(function() { 
     $scope.$parent.hideHeader(); 
    }, 0); 

    var init = function(){ 
    google.maps.event.addDomListener(window, 'load', function() { 
     var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 
     var styles = [{"featureType":"all","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":"0.5"},{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"lightness":"-50"},{"saturation":"-50"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text","stylers":[{"hue":"#009aff"},{"saturation":"25"},{"lightness":"0"},{"visibility":"simplified"},{"gamma":"1"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"0"},{"lightness":"100"},{"gamma":"2.31"},{"visibility":"on"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"20"},{"gamma":"1"}]},{"featureType":"landscape","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-100"}]},{"featureType":"landscape","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"lightness":"0"},{"saturation":"45"},{"gamma":"4.24"},{"visibility":"simplified"},{"hue":"#00ff90"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-100"},{"color":"#f5f5f5"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#666666"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"saturation":"-25"}]},{"featureType":"transit.line","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station.airport","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"50"},{"gamma":".75"},{"saturation":"100"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.icon","stylers":[{"visibility":"off"}]}]; 

     var mapOptions = { 
      center: myLatlng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      styles : styles, 
      disableDefaultUI: true 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     navigator.geolocation.getCurrentPosition(function(pos) { 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var myLocation = new google.maps.Marker({ 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       map: map, 
       title: "My Locations" 
       }); 
      }); 

     $scope.map = map; 
     }); 
    } 
    init(); 
    ionicMaterialInk.displayEffect(); 
}) 

page.html中

<ion-view view-title="Login" align-title="left" ng-init="init()"> 
<ion-content ng-class="{expanded:$scope.isExpanded}"> 
    <div id="map"> 
    </div> 
    <div class="hero no-header flat"> 
     <div class="content"> 
      <div class="fa fa-taxi fa-3x" style="color:#D3D3D3"></div> 
      <h1 id="logo" >Metro</h1> 
     </div> 
    </div> 

<div id="over_map"> 
    <!-- <div class="list"> 
     <ion-md-input placeholder="Pickup Location" highlight-color="balanced" type="text"></ion-md-input> 
     <ion-md-input placeholder="Destination" highlight-color="balanced" type="text"></ion-md-input>    
    </div> --> 
    <div class="padding"> 
     <button ui-sref="app.profile" class="button button-full button-balanced ink">Search</button> 
    </div> 
</div> 

    <div class="button-bar social-login"> 
     <button class="button button-small button-border icon-left ion-social-google button-assertive-900">Google+</button> 
     <button class="button button-small button-border icon-left ion-social-twitter button-calm-900">Twitter</button> 
     <button class="button button-small button-border icon-left ion-social-facebook button-positive-900">Facebook</button> 
    </div> 
</ion-content> 

Answer 1

尝试将$scope.map = map;行之后添加google.maps.event.trigger(map, 'resize');。

UPDATE：

尝试

.controller('LoginCtrl', function($scope, $timeout, $stateParams, ionicMaterialInk, $ionicLoading) { 
    $scope.$parent.clearFabs(); 
    $scope.isExpanded = true; 
    $timeout(function() { 
     $scope.$parent.hideHeader(); 
    }, 0); 

    var init = function(){ 
    google.maps.event.addDomListener(window, 'load', function() { 
     var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 
     var styles = [{"featureType":"all","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":"0.5"},{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"lightness":"-50"},{"saturation":"-50"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text","stylers":[{"hue":"#009aff"},{"saturation":"25"},{"lightness":"0"},{"visibility":"simplified"},{"gamma":"1"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"0"},{"lightness":"100"},{"gamma":"2.31"},{"visibility":"on"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"20"},{"gamma":"1"}]},{"featureType":"landscape","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-100"}]},{"featureType":"landscape","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"lightness":"0"},{"saturation":"45"},{"gamma":"4.24"},{"visibility":"simplified"},{"hue":"#00ff90"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-100"},{"color":"#f5f5f5"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#666666"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"saturation":"-25"}]},{"featureType":"transit.line","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station.airport","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"50"},{"gamma":".75"},{"saturation":"100"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.icon","stylers":[{"visibility":"off"}]}]; 

     var mapOptions = { 
      center: myLatlng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      styles : styles, 
      disableDefaultUI: true 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     navigator.geolocation.getCurrentPosition(function(pos) { 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var myLocation = new google.maps.Marker({ 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       map: map, 
       title: "My Locations" 
       }); 
      }); 

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

     }); 
    } 


    $scope.$on("$ionicView.enter", init); 
    ionicMaterialInk.displayEffect(); 
}) 

Answer 2

没有什么不对您的代码。您可能会错过map div的高度和宽度。 我已经删除离子框架模块只是为了让我的代码工作，但这不会影响到这里。缺少线程的高度和宽度来映射

#map { 
    height:420px; 
    width:600px; 
} 

结帐下面

var myApp = angular.module('myApp',[]); 
 
    
 
myApp.controller('LoginCtrl', function($scope, $timeout) { 
 
    
 
    
 
    var init = function(){ 
 
    google.maps.event.addDomListener(window, 'load', function() { 
 
     var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 
 
     var styles = [{"featureType":"all","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"weight":"0.5"},{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"lightness":"-50"},{"saturation":"-50"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text","stylers":[{"hue":"#009aff"},{"saturation":"25"},{"lightness":"0"},{"visibility":"simplified"},{"gamma":"1"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"saturation":"0"},{"lightness":"100"},{"gamma":"2.31"},{"visibility":"on"}]},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"20"},{"gamma":"1"}]},{"featureType":"landscape","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-100"}]},{"featureType":"landscape","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"lightness":"0"},{"saturation":"45"},{"gamma":"4.24"},{"visibility":"simplified"},{"hue":"#00ff90"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-100"},{"color":"#f5f5f5"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"visibility":"simplified"},{"color":"#666666"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.icon","stylers":[{"saturation":"-25"}]},{"featureType":"transit.line","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station.airport","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"50"},{"gamma":".75"},{"saturation":"100"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.icon","stylers":[{"visibility":"off"}]}]; 
 

 
     var mapOptions = { 
 
      center: myLatlng, 
 
      zoom: 16, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
      styles : styles, 
 
      disableDefaultUI: true 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 

 
     navigator.geolocation.getCurrentPosition(function(pos) { 
 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
 
      var myLocation = new google.maps.Marker({ 
 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
 
       map: map, 
 
       title: "My Locations" 
 
       }); 
 
      }); 
 

 
     $scope.map = map; 
 
     }); 
 
    } 
 
    init(); 
 
})

#map { 
 
    height:420px; 
 
    width:600px; 
 
}

<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 

 
<body> 
 

 

 
    <div ng-app="myApp" ng-controller="LoginCtrl"> 
 
    <div id="map"></div> 
 
    </div>

典笔在这里http://codepen.io/JoyCoder/pen/XmYppP