難以讓Google地圖在Ionic中顯示 - 「google未定義」

我一直在用離子建立一個應用程序，並且我在導航到地圖時很難讓Google Map顯示視圖。似乎科爾多瓦運行正常，因爲它要求我提供我的位置。我已經添加了白名單插件。我也花了6個小時試圖讓Ionic展示一張簡單的地圖。我只是想表現出來。這裏是我的代碼：難以讓Google地圖在Ionic中顯示 - 「google未定義」

的index.html

<!DOCTYPE html> 
    <html> 
     <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"> 
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

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

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="js/ng-cordova.min.js"></script> 
     <script src="cordova.js"></script> 


    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/services.js"></script> 
     <script src="js/directives.js"></script> 
    <script src="css/style.css"></script> 
     <script src="scss/ionic.app.scss"></script> 
    </head> 
    <body ng-app="starter"> 
    <!-- 
     The nav bar that will be updated as we navigate between views. 
    --> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
    </ion-nav-bar> 

    <ion-nav-view></ion-nav-view> 

    </body> 
</html>

app.js

// Ionic Starter App 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 
// 'starter.services' is found in services.js 
// 'starter.controllers' is found in controllers.js 
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova']) 

.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 && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     cordova.plugins.Keyboard.disableScroll(true); 

    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

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

    // Ionic uses AngularUI Router which uses the concept of states 
    // Learn more here: https://github.com/angular-ui/ui-router 
    // Set up the various states which the app can be in. 
    // Each state's controller can be found in controllers.js 
    $stateProvider 

    // setup an abstract state for the tabs directive 

     .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html' 
    }) 

    // Each tab has its own nav history stack: 



    .state('tab.home', { 
    url: '/home', 
    views: { 
     'tab-home': { 
     templateUrl: 'templates/tab-home.html', 
     controller: 'DashCtrl' 
     } 
    } 
    }) 

    .state('tab.exteriorpainting', { 
     url: "/exteriorpainting", 
     views: { 
     'tab-home': { 
      templateUrl: "services/exteriorPainting.html" 
     } 
     } 
    }) 

    .state('tab.map', { 
     url: "/map", 
     views: { 
     'tab-home': { 
      controller: 'MapCtrl', 
      templateUrl: 'templates/map.html' 
     } 
     } 
    }) 

    .state('tab.login', { 
     url: '/login', 
     views: { 
     'tab-login': { 
      templateUrl: 'templates/tab-login.html', 
      controller: 'DashCtrl' 
     } 
     } 
    }) 

    .state('tab.signup', { 
    url: '/signup', 
    views: { 
     'tab-signup': { 
     templateUrl: 'templates/tab-signup.html', 
     controller: 'AccountCtrl' 
     } 
    } 
    }); 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('tab/home'); 

});

的style.css

#scroll { 
    height: 100%; 
} 

#map { 
    width: 100%; 
    height: 100%; 
}

controllers.js

angular.module('starter.controllers', ['ionic', 'ngCordova']) 

.controller('DashCtrl', function($scope) {}) 

.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) { 
var options = {timeout: 10000, enableHighAccuracy: true}; 

    $cordovaGeolocation.getCurrentPosition(options).then(function(position){ 

    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

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

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

    }, function(error){ 
    console.log("Could not get location"); 
    }); 
});

map.html

<ion-view title="Map"> 
    <ion-content> 
     <div id="map" data-tap-disabled="false"></div> 
    </ion-content> 
</ion-view>

我不知道我在做什麼錯在這裏，但我愛一些幫助。

來源

2015-11-13 fergy

看起來您還沒有加入Google Maps API JS庫。因此，爲什麼「谷歌」是不確定的......

包括在你的app.js之前，您的index.html庫加入：

<script src="https://maps.googleapis.com/maps/api/js"></script>

查找如何到達這裏開始更多的指令：https://developers.google.com/maps/documentation/javascript/tutorial

此外，角谷歌地圖庫（http://angular-ui.github.io/angular-google-maps/#!/）工作得很好，我會推薦使用它。它有一個快速入門指南可在這裏：http://angular-ui.github.io/angular-google-maps/#!/use

來源

2015-11-14 01:22:19 mani

Opps！感謝那！ – fergy

難以讓Google地圖在Ionic中顯示 - 「google未定義」

回答

相關問題