使用 Angular ui-router($stateProvider) 时不会出现 GoogleMaps答案

【问题标题】：GoogleMaps doesn't appear when Angular ui-router($stateProvider) is used使用 Angular ui-router($stateProvider) 时不会出现 GoogleMaps
【发布时间】：2016-11-14 14:31:12
【问题描述】：

我的简单离子项目中有三个状态。我想在登录后将地图添加到主页。当我尝试在作为模板文件的 map.html 文件中添加地图时，它会在通过浏览器打开 map.html 时出现。但是，当我尝试使用 $stateProvider 达到此状态（map.html）时，地图不会出现。

我的 map.html 文件是：

    <!DOCTYPE html>
<html ng-app="starter">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

      <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }
    </style>      
  </head>

 <body ng-controller="mapctrl">
    <ion-header-bar class="bar-dark"> <h1 class="title">Home Page</h1></ion-header-bar>
     <ion-view>
         <div id="map" ng-init="initMap()"></div>
         <button ng-click="goOther()" class="button button-block button-dark">For more detail please click!</button>
     </ion-view>
    </body>
</html>

我的 app.js 是：

var app =angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $stateProvider
    .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginctrl'
    })
    .state('map',{
        url:'/map',
        templateUrl:'templates/map.html',
        controller:'mapctrl'
    })
    .state('other',{
        url:'/other',
        templateUrl:'templates/other.html',
        controller:'otherctrl'
    })

     $urlRouterProvider.otherwise('/login');
}])

app.controller('loginctrl',function($scope,$state){
    $scope.goMap = function(){$state.go('map');};
})

app.controller('mapctrl',function($scope,$state){
    $scope.goOther = function(){
        $state.go('other');};

      $scope.initMap = function () {
      console.log("deneme");
        var myLatlng = new google.maps.LatLng(51.5120, -0.12);
        var mapOptions = {
            zoom: 14,
            center: myLatlng
                }
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center);
        });
    };
})


app.controller('otherctrl',function($scope,$state){
    $scope.goLogin = function(){$state.go('login');};
});

我也尝试将地图直接添加到 map.html 文件中，但它也没有出现。

提前致谢。

【问题讨论】：

我希望你需要在
我应该包括什么？
stackoverflow.com/questions/23975827/…的可能重复

标签： javascript angularjs google-maps ionic-framework angular-ui-router

【解决方案1】：

Google 地图仅适用于 chrome 中的 https，它可能与 $stateProvider 没有任何依赖关系

【讨论】：