0
我是新的離子，但我會嘗試將我的舊應用程序轉換爲這個強大的框架。 我會嘗試使用谷歌地圖API加載模板頁面。插入谷歌地圖API進入離子模板頁面
這是我app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html"
}
}
})
.state('app.mappa', {
url: "/mappa",
views: {
'menuContent' :{
templateUrl: "templates/mappa.html",
controller: 'MarkerRemoveCtrl'
}
}
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})
.state('app.registrati', {
url: "/registrati",
views: {
'menuContent' :{
templateUrl: "templates/registrati.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "templates/browse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent' :{
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'menuContent' :{
templateUrl: "templates/playlist.html",
controller: 'PlaylistCtrl'
}
}
})
.state('app.prova', {
url: "/prova",
views: {
'menuContent' :{
templateUrl: "templates/prova.html"
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
，這是我controller.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.loginData = {};
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.closeLogin = function() {
$scope.modal.hide();
};
$scope.login = function() {
$scope.modal.show();
};
$scope.doLogin = function() {
console.log('Eseguo la login', $scope.loginData);
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('MarkerRemoveCtrl', function($scope, $ionicLoading) {
$scope.positions = [{
lat: 43.07493,
lng: -89.381388
}];
$scope.$on('mapInitialized', function(event, map) {
$scope.map = map;
});
$scope.centerOnMe= function(){
$scope.positions = [];
$ionicLoading.show({
template: 'Loading...'
});
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$scope.positions.push({lat: pos.k,lng: pos.B});
console.log(pos);
$scope.map.setCenter(pos);
$ionicLoading.hide();
});
};
});
，然後這是我的index.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="css/ionic.app.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
當你瞭解我當我點擊「mappa」按鈕時，我會打開mappa.html模板並加載地圖！
mappa.html
<ion-view ng-controller="MarkerRemoveCtrl">
<ion-content scroll="false">
<div class="mapWrap" data-tap-disabled="true">
<map center="43.07493,-89.381388" zoom="15">
<!-- ngRepeat: pos in positions -->
<marker ng-repeat=" pos in positions" position="{{pos.lat}},{{pos.lng}}"></marker>
</map>
</div>
</ion-content>
</ion-view>
但沒有發生！ 我會嘗試把mappa.html代碼放入索引，並且所有的工作都很好！
現在的問題是： 是可以加載地圖在其他模板頁面，或只在主頁面？ 以及如何？
Update解決方案
好吧，我解決我的問題，所以只調用的init（）
這是maps.html
<ion-view title="MAPPA" ng-init="init()">
<ion-nav-bar class="bar-energized"></ion-nav-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark"> <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Dove mi trovo</a> </ion-footer-bar>
</ion-view>
這是控制器：
//MAPPE
.controller('mapCtrl', function($scope, $ionicLoading, $compile) {
$scope.init = function() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Clicca qui!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
};
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {return;}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(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);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
})
對我來說工作很好，當點擊f點擊正確的位置並在地圖上顯示！ 謝謝！
僅供參考：此插件可幫助您將本地Google地圖嵌入您的應用。許多離子框架用戶使用這個插件。 https://github.com/wf9a5m75/phonegap-googlemaps-plugin – wf9a5m75 2014-11-02 19:13:26