Angularjs 很难让谷歌地图显示在爱奥尼亚-“谷歌没有定义”_Angularjs_Google Maps_Ionic Framework

Angularjs 很难让谷歌地图显示在爱奥尼亚-“谷歌没有定义”

angularjs google-maps ionic-framework

Angularjs 很难让谷歌地图显示在爱奥尼亚-“谷歌没有定义”,angularjs,google-maps,ionic-framework,Angularjs,Google Maps,Ionic Framework,我一直在用Ionic构建一个应用程序，当我导航到地图视图时，我很难让谷歌地图显示出来。科尔多瓦似乎运行正常，因为它问我的位置。我已经添加了白名单插件。我还花了6个小时试图让Ionic显示一张简单的地图。我只是想展示一下。这是我的密码： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=

我一直在用Ionic构建一个应用程序，当我导航到地图视图时，我很难让谷歌地图显示出来。科尔多瓦似乎运行正常，因为它问我的位置。我已经添加了白名单插件。我还花了6个小时试图让Ionic显示一张简单的地图。我只是想展示一下。这是我的密码：

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>

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>

我不确定我在这里做错了什么，但我希望得到一些帮助。

看起来您还没有包括Google Maps API JS库。所以为什么“谷歌”没有定义

通过添加以下内容，在app.js之前将库包含在index.html中：

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

在此处查找有关如何开始的更多说明：

此外，谷歌地图库的工作非常好，我建议使用它。这里有一个快速入门指南：

Opps！谢谢你！

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

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