使用Angular ui-router（$ stateProvider）时不会出现GoogleMaps

Question

我的简单离子项目中有三个状态。 我想在登录后将地图添加到主页。当我尝试在作为模板文件的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文件中，但也没有出现。

提前致谢。

Answer 1

Google Maps仅适用于Chrome中的https ，并且与$ stateProvider可能没有任何依赖关系

使用Angular ui-router（$ stateProvider）时不会出现GoogleMaps

问题描述

1 个解决方案

解决方案1
0 2016-07-19 12:21:31

使用Angular ui-router（$ stateProvider）时不会出现GoogleMaps

问题描述

1 个解决方案

解决方案1 0 2016-07-19 12:21:31

解决方案1
0 2016-07-19 12:21:31