地图没有出现在离子与phonegap谷歌地图插件
地图没有出现在离子与phonegap谷歌地图插件
提问于 2014-11-11 16:49:33
我正在用Ionic框架和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回答 4
Stack Overflow用户
发布于 2014-11-11 18:42:45
谢谢你使用我的插件。不过，我不太熟悉离子框架，很多人都使用它。所以应该行得通。
不幸的是，地图插件不支持多个映射。所以您需要再次使用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
Stack Overflow用户
发布于 2014-11-12 14:11:40
这是一个可行的解决方案，在map页控制器中。
.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')">Stack Overflow用户
发布于 2015-01-07 18:01:08
我认为您的问题是关于sdk的，您一定要把这个指令( 视窗，Mac/Linux )放进去吗？
好吧，这是我的方式，
My Map 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);
})祝好运。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26870064
复制相关文章
相似问题
腾讯云开发者
