cordova - 带有phonegap google maps插件的地图没有出现在离子中

Question

我正在使用 Ionic Framework 和 AngularJS 开发一个 Phonegap 应用程序，我必须将两个地图放在不同的页面中。我得到了一个空白窗口

在app.js中

.run(function () {
 ionic.Platform.ready(function () {
                var div = document.getElementById("map_canvas1");
        alert('deviceready');

        alert(window.plugin);

      //  map = window.plugin.google.maps.Map.getMap(div);
         if (window.plugin) {
            alert(1);
            map = window.plugin.google.maps.Map.getMap(div);
        }

      });
    })

我的html页面

<div class="modal">
   <ion-header-bar class="bar-positive">
      <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
      <h1 class="title">Géolocalisation</h1>

     </ion-header-bar>
   <ion-content>
    <div style="width:90%;margin-left:10%;height:500px" id="map_canvas1"></div>
   </ion-content>
 </div>

我在 logcat 中收到此错误

 11-11 17:33:38.823: E/GooglePlayServicesUtil(10062): The Google Play services resources were not  found. Check your project configuration to ensure that the resources are included.
 11-11 17:33:40.367: E/GooglePlayServicesUtil(10062): The Google Play services resources were not found. Check your project configuration to ensure that the resources are included.
 11-11 17:33:40.732: E/NativeCrypto(10062): ssl=0x53d54c10 cert_verify_callback x509_store_ctx=0x57b8dae8 arg=0x0
 11-11 17:33:40.732: E/NativeCrypto(10062): ssl=0x53d54c10 cert_verify_callback calling verifyCertificateChain authMethod=ECDHE_ECDSA

Answer 1

Thank you for using my plugin. I'm not familiar with the ionic framework though, many people use with it. So it should work.

Unfortunately, the map plugin does not support multiple maps. So you need to map.remove(), then Map.getMap() again.

Many people asks regarding of ionic on the issue list. You might find helpful information. https://github.com/wf9a5m75/phonegap-googlemaps-plugin/search?q=ionic&type=Issues&utf8=%E2%9C%93

Also the forum page of the ionic framework might help for your issue. http://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456

Answer 2

这是一个有效的解决方案，在地图页面控制器中

.controller('GeoCtrl', ['$scope', 'FlightDataService','Search','Distance','$http','$ionicLoading','$state', function($scope, FlightDataService,Search,Distance,$http,$ionicLoading,$state) {

var div = document.getElementById("map_canvas"); 
const GORYOKAKU_JAPAN = new plugin.google.maps.LatLng(41.796875,140.757007);
if(plugin.google)
map = plugin.google.maps.Map.getMap(div,{
'backgroundColor': 'white',
'mapType': plugin.google.maps.MapTypeId.HYBRID,
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
 },
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true
 },
'camera': {
'latLng': GORYOKAKU_JAPAN,
'tilt': 30,
'zoom': 15,
'bearing': 50
 }
 });


 map.refreshLayout();

 }]);

并在应用程序控制器中

 .controller('AppCtrl', function($scope, $ionicModal, $timeout,$state,$ionicSideMenuDelegate) {
 $('.menu-left').css('display','none'); 
 $scope.go = function(route){
 display = 'none';
 $('.menu-left').css('display','none');

 $state.go('app.'+route);   
 };

 $scope.toggleLeftSideMenu = function() {
 $ionicSideMenuDelegate.toggleLeft();
 alert(display);
 if(display == 'block')
    display ='none';
    else
    display ='block';
 $('.menu-left').css('display',display);

 }; 
 }); 

最后在菜单页面中单击添加 ng-click="go('geolocalisation')"

<ion-item nav-clear menu-close  ng-click="go('geolocalisation')">

Answer 3

我认为您的问题与sdk有关，您确定要遵循此说明Windows、Mac/Linux

好的，这是我的方式，

我的地图html，

<ion-view view-title="Map" ng-controller="MapControl">
  <ion-content>
      <div class="card">
          <div style="width:100%;height:400px" id="map_canvas"></div>
      </div>
  </ion-content>
</ion-view>

我的控制器，

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

    var div = document.getElementById("map_canvas");
    map = plugin.google.maps.Map.getMap(div);
})

祝你好运。

Answer 4

这对我有用：

HTML：

<ion-view view-title="Map" ng-open="mapCTRL.init()">
<ion-content>   
        <div class="card" id="map" data-tap-disabled="true"></div>
</ion-content>
 <ion-footer-bar class="bar-assertive">
        <a ng-click="mapCTRL.test()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
        </ion-view>

JS：

angular.module('maps', []).directive('myMap', function () {
return {
    restriction: 'E',
    templateUrl: 'templates/map.html',
    controller: function ($scope, $ionicLoading) {

        this.init = function () {
            var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

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

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

            $scope.map = map;
        };            
    },
    controllerAs: 'mapCTRL'
};
});