Ionic Framework не показывает Google Maps

0

Я пытаюсь изучить Ionic Framework, и я застрял в части Google Maps. Я просто пытаюсь отобразить карту на экране, но вместо этого вижу белый экран. Любая помощь будет оценена!

Вот мой код index.html:

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

    <title>YOE</title>

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

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/index.js"></script>
    <script src="cordova.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAJJYLVx6vFBLDO8EUA5RNAPtqIzI27HY0&sensor=true"></script>

  </head>

  <body>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>
</html>

И вот мой код index.js:

angular.module('app', ['ionic', 'app.controllers'])


.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('signin', {
      url: '/sign-in',
      templateUrl: 'templates/sign-in.html',
      controller: 'SignInCtrl'
    })

    .state('menu', {
      url: '/menu',
      abstract: true,
      templateUrl: 'templates/menu.html'
    })
    .state('menu.jukebox', {
      url: '/jukebox',
      views: {
        'menuContent': {
          templateUrl: 'templates/jukebox.html',
        }
      }
    })
    .state('venues', {
      url: '/venues',
      templateUrl: 'templates/venues.html',
      controller: 'VenuesCtrl'
    })
    .state('venues.venueList', {
      url: '/venueList',
      views:{
        'venueDetails': {
          templateUrl: 'templates/venueList.html',
          controller: 'VenueListCtrl'
        }
      }
    })

    .state('venues.venueMap', {
      url: '/venueMap',
      views:{
        'venueDetails': {
          templateUrl: 'templates/venueMap.html',
          controller: 'venueMapCtrl'
        }
      }
    });

  $urlRouterProvider.otherwise('/sign-in');

});

controllers.js:

angular.module('app.controllers', [])

.controller('SignInCtrl', function($scope, $state) {

  $scope.signIn = function(user) {
    console.log('Sign-In', user);

    /*

        Authenticate user through Firebase, if authenticated, go to menu.jukebox state.
    */
    $state.go('venues.venueList');
  };
})

.controller('VenuesCtrl', function($scope){

    $scope.hideBackButton = true;
})

.controller('VenueListCtrl', function($scope){

    /*
        Dummy array for venues. It will be changed with the data from the server. 
    */

  $scope.venues = [
    { id: 1, name: 'Lucky Strike San Fransisco', distance: '0.3 km', image: 'http://wtc15.com/sites/wtc15.com/files/cr-collections/7/100x100/valamar-venue1.jpg' },
    { id: 2, name: 'Match', distance: '0.7 km', image: 'http://www.venuereport.com/uploads_cache/venue_tiny/2014/10/Ironside-Oyster-San-Diego-Venue-3.jpg' },
    { id: 3, name: 'Supercell', distance: '0.9 km', image: 'http://www.venuereport.com/uploads_cache/venue_tiny/2014/10/paris-event-venue-4.jpg' },
    { id: 4, name: 'The Melt', distance: '4 km', image: 'http://www.venuereport.com/uploads_cache/venue_tiny/2014/10/belize-wedding-venue-3.jpg' }
  ];
})

.controller('venueMapCtrl', function($scope, $ionicLoading) {
           console.log('map', 'reached that far');

    google.maps.event.addDomListener(window, 'load', function() {

        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

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

        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 Location"
            });
        });

        $scope.map = map;
    });

});

venues.html:

<ion-view view-title="Venues" hide-back-button="true">
    <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
        <div class="tabs">
          <a class="tab-item active" ui-sref="venues.venueList">
            <i class="icon ion-ios-list"></i>
            List
          </a>
          <a class="tab-item" ui-sref="venues.venueMap">
            <i class="icon ion-map"></i>
                Map
          </a>
        </div>
    </div>
    <ion-nav-view name="venueDetails"></ion-nav-view>
</ion-view>

venuesMap.html:

<ion-view view-title="VenueMap">
    <ion-content>
        <h1>asdasdads</h1>
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>

venuesList.html:

<ion-view view-title="VenueList">
  <ion-content style="padding-top: 50px;">
    <div class="list">

        <a ng-repeat="venue in venues" 
           href="#/{{venue.id}}"
           class="item item-thumbnail-left">

          <img ng-src="{{ venue.image }}">
          <h2>{{ venue.name }}</h2>
          <br>
          <p>{{ venue.distance }}</p>
        </a>

      </div>
  </ion-content>
</ion-view>

style.css:

.scroll {
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}
Теги:
ionic-framework
google-maps
ionic

2 ответа

2
Лучший ответ

Я решил проблему с помощью этой страницы. Проблема была в примере с ионным кодом. Лучшее использование:

google.maps.event.addDomListener(window, 'load', initialize);

чем,

ionic.Platform.ready(initialize);
Поделиться
0

Я решил эту проблему, используя метод ниже:

angular.element(document).ready(function () {
    //load your map inside this
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню