Карта не появилась в ионной форме с помощью phonegap плагина Google Maps

Question

Я разрабатываю приложение Phonegap с Ionic Framework и AngularJS, мне нужно поместить две карты на разных страницах. я получаю это пустое окно

В 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

Благодарим вас за использование моего плагина. Я не знаком с ионным каркасом, хотя многие используют его. Так что это должно сработать.

К сожалению, плагин карты не поддерживает несколько карт. Итак, вам нужно map.remove(), затем Map.getMap() снова.

Многие люди спрашивают об ионности в списке проблем. Вы можете найти полезную информацию. https://github.com/wf9a5m75/phonegap-googlemaps-plugin/search?q=ionic&type=Issues&utf8=%E2%9C%93

Также страница форума ионной структуры может помочь в решении вашей проблемы. 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); 

}; 
}); 

И, наконец, в мыши на странице меню оных нг кнопкой мыши =» go ('геолокализация') "

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

Answer 3

Я думаю, что ваш probl эм о 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> 

My Controller,

.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' 
}; 
});