尝试在 Android 应用中使用 google.maps.geocoder 时出现“未定义谷歌”错误答案

【问题标题】：Getting a 'google is not defined' error when trying to use google.maps.geocoder in Android app尝试在 Android 应用中使用 google.maps.geocoder 时出现“未定义谷歌”错误
【发布时间】：2016-03-01 22:53:06
【问题描述】：

我有一个 ionic cordova Android 应用程序，我正在尝试使用 Google 地图 API。具体来说，我想使用地理编码器功能。在我的 Cordova Android 应用程序代码中，我有一行代码可以访问地理编码器：

var geocoder = new google.maps.Geocoder();

这行代码在''文件中并抛出错误：'ReferenceError google is not defined'。

我在 index.html 文件中添加 google maps api 如下：

<!DOCTYPE html>
<html ng-csp="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy"
          content="default-src *;
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           127.0.0.1:*
                           http://192.168.1.254
                           maps.googleapis.com
                           autolinkmaker.itune.apple.com
                           http://*.itunes.apple.com
                           http://*.googleapis.com
                           http://*.maxplatform.com
                           https://*.itunes.apple.com
                           https://*.googleapis.com
                           https://*.maxplatform.com
                           ;
               style-src  'self' 'unsafe-inline'
                           127.0.0.1:*
                           http://192.168.1.254
                           maps.googleapis.com
                           autolinkmaker.itune.apple.com
                           http://*.itunes.apple.com
                           http://*.googleapis.com
                           http://*.maxplatform.com
                           https://*.itunes.apple.com
                           https://*.googleapis.com
                           https://*.maxplatform.com
    ">

    <title></title>

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

    <link href="https://fonts.googleapis.com/css?family=Open%20Sans%3A300%2C600%2C700" rel="stylesheet" type="text/css">

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

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


    <script src="js/app.js"></script> 
    <script src="js/controllers/appctrl.js"></script> 
    <script src="js/controllers/sharectrl.js"></script>
    <script src="js/controllers/homectrl.js"></script>
    <script src="js/controllers/tourctrl.js"></script>
    <script src="js/controllers/newsctrl.js"></script>
    <script src="js/controllers/friendsctrl.js"></script>
    <script src="js/controllers/discoverctrl.js"></script>
    <script src="js/controllers/watchlistctrl.js"></script>
    <script src="js/controllers/trailerctrl.js"></script>
    <script src="js/controllers/settingsctrl.js"></script>

    <script src="lib/angular-base64/angular-base64.min.js"></script>
    <script src="lib/angular-resource/angular-resource.min.js"></script>
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="lib/angular-messages/angular-messages.min.js"></script>
    <script src="lib/ionic-rating/ionic-rating.min.js"></script>
    <script src="lib/ion-google-place/ion-google-place.js"></script>

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

  </head>

  <body ng-app="cuesApp" ng-cloak="">
    <ion-nav-view>
    </ion-nav-view>
  </body>
</html>

我不明白为什么 google 未定义？

【问题讨论】：

那个 Javascript 语句放在哪里？在实际代码sn-p中找不到
它在包含的文件中：lib/ion-google-place/ion-google-place.js
将此语句
我试过没有任何区别

标签： javascript android cordova google-maps google-maps-api-3

【解决方案1】：

您正在加载所有其他脚本之后的 Google Maps API，因此当您尝试使用 google.maps 时，它还不存在。

将<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 移到顶部以修复它。

【讨论】：

是的，我试过了，没有任何区别。但是在标签中移动它似乎已经解决了这个问题！
唉，这对我没有帮助:-(

【解决方案2】：

寻找元安全标签。并在 chrome 浏览器中使用 chrome://inspect/#devices 调试 ionic 应用程序。您会注意到元安全错误。

【讨论】：