0
地図を使ってsidemenuを実行しようと何度も繰り返し試みてきたが、画面が白くなっている。私はそれが間違っていることを正確に教えてくれる人が必要です。どうすれば修正できますか？Ionic sidemenuが地図をクラッシュする
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs27t8rz7neJCwe6xNdWTPLMr5QmR-8Cg"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</head>
<body ng-app="starter" ng-controller="MapCtrl">
<ion-header-bar class="bar-calm">
<button class="button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>
<h1 class="title">Map</h1>
<button class="button button-clear button-positive">Edit</button>
</ion-header-bar>
<!--trabajando con el sidemenu-->
<ion-side-menu>
<ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item>HOME</ion-item>
</ion-list>
<ion-list>
<ion-item>BRYAN</ion-item>
</ion-list>
<ion-list>
<ion-item>KORA</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menu-content>
</ion-side-menu>
<ion-content scroll="false">
<map on-create="mapCreated(map)" ng-init="initMap()"></map>
</ion-content>
<ion-footer-bar class="bar-calm">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
</ion-footer-bar>
</body>
</html>
そして、これは私が最終的に解決策を見つけたcontroller.js
angular.module('starter.controllers', [])
.controller('MapCtrl', function($scope, $ionicLoading, $ionicSideMenuDelegate) {
$scope.left = function() {
$ionicSideMenuDelegate.left();
}
$scope.mapCreated = function(map) {
$scope.map = map;
};
$scope.centerOnMe = function() {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
console.log('Got pos', pos);
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
};
});
//
.controller('MapCtrl', function($scope, $ionicSideMenuDelegate){
$scope.toggleLeft = function(){
$ionicSideMenuDelegate.toggleLeft()
}
})
他の投稿Do not HELP！ –
コンソールにエラーはありますか？ – Anuj