Google 地图不显示在使用 Cordova 的 Ionic Android Build .apk 上（在 Chrome 浏览器上运行良好）答案

【问题标题】：Google map does not display on Ionic Android Build .apk using Cordova( works fine on the Chrome browser)Google 地图不显示在使用 Cordova 的 Ionic Android Build .apk 上（在 Chrome 浏览器上运行良好）
【发布时间】：2015-02-24 04:13:31
【问题描述】：

请帮忙

问题：无法在页面上显示使用 cardova 的 ionic android 构建应用程序的谷歌地图（在 Chrome 上运行良好，即无需 Android 构建）

页面：

<script id="mapPage.html" type="text/ng-template">
   <ion-view title="Map" ng-init="init()" >
     <ion-nav-buttons side="left">
       <button class="button"> Back </button>
     </ion-nav-buttons> 
     <ion-content>
        <div id="map" data-tap-disabled="true"></div>
     </ion-content>
  </ion-view>

路由器：

.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider
    .state('mapPage', 
     url: '/9',
     templateUrl: 'mapPage.html',
     controller: 'mapPageTabCtrl'
  })

控制器：

.controller('mapPageTabCtrl', function($scope, $timeout, googleAppEngineService, $ionicPopup,  
     controller_Provider, $ionicLoading, $compile) {

    $scope.init= function() 
    {   
        var propAddress = $scope.propInfoDetailsObj.prop_address;
        var geocoder = new google.maps.Geocoder();
        var result = "";
        geocoder.geocode( { 'address': propAddress}, function(results, status) 
        {
             if (status == google.maps.GeocoderStatus.OK) 
             {
                 var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng() );

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

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

                    var marker = new google.maps.Marker({
                      map: map,
                      position: myLatlng
                    });

                    google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map,marker);
                    });

                 $scope.map = map;
             } 
             else 
             {
                 result = "Unable to find address: " + status;
                 console.log("###" + result);
             }

        })//geocoder.geocode( { 'ad
    };  
    //});// function()
})//controller('mapPageTabCtrl',

在 android build($ionic build android) 之前，使用 tomcat 在 Chrome 浏览器上对其进行了测试，并且工作正常。我可以在页面上看到谷歌地图。

接下来，
使用 $ionic build android，创建了一个 apk 文件并在 AVD 模拟器和真正的 android 手机上进行了测试，发现页面不会加载谷歌地图，看起来像是忽略了 $scope.init= function(){}。

感谢您的帮助...

【问题讨论】：

首先您应该尝试加载基本地图并检查 $scope.init 是否正常工作
在 chrome 上调试时，它确实执行了 $scope.init 函数，这就是为什么我能够在页面上看到 googleMap 的原因。然后使用 $ionic build android 为 andorid 构建相同的代码，当在实际的 android 手机上测试 apk 时，它没有在页面上显示 googleMap。

标签： ionic-framework

【解决方案1】：

问题已解决 - 代码错误，导致无法加载地图

【讨论】：

我现在遇到了类似的错误，在浏览器上工作，但在我把它放在手机上时就不行。你是怎么解决的？

【解决方案2】：

如果您可以在浏览器上查看地图，但在为 android 部署时无法查看，请运行以下命令：ionic plugin add cordova-plugin-whitelist。 Http 请求默认禁用，因此不会加载所有外部脚本。

【讨论】：