So I´m working on my first Angular & Ionic App with Geolocation. It should be simple, your location is traced by the green marker, you click on "location" to save a loc, walk on and it shows you where you are and how to get back to the saved marker. clear only clears the saved locations. But i would like this thingi to update automatically while running.... I´m sure there are the correct answers somewhere around here, but I´m tired and confused by now, so please help! This should be my final project for university and I´ve got to present it in 5 days, so help and suggestions are very much appreciated! tx hanna
Questions: 1) Should the local storage work also within Ionic View? I have had quite some trouble with local storage before, so im unsure it´s implemented correct. But I never worked with Ionic View before, so I don´t know where the bug is. If there is one ;-) 2) I tried to run the apk file on my android phone, and the map doesn´t load, it works fine in Ionic View though. Any tips on this?
Here´s the code: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Maps</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="cordova.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFuGXZRdScyACha4VZfABtZy7HK6qJFj4" type="text/javascript"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="MapController">
<ion-header-bar lass="bar-clear">
<div ng-click="toggle()">
<button class="button button-clear button-positive icon" ng-click="reload()">
<i class="ion-ios-location-outline"></i>iO<b>Geo</b>
</button>
</div>
<div ng-click="toggle()">
<button class="button button-clear button-positive icon" ng-click="save()">
<i class="ion-ios-plus-outline"></i> location
</button>
</div>
<div ng-click="toggle()">
<button class="button button-clear button icon" ng-click="clear()">
<i class="ion-ios-minus-outline"></i> clear
</button>
</div>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic','ngCordova', 'ngStorage']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform, $localStorage, $cordovaVibration) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>location...'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var startPos = new google.maps.LatLng(lat, long);
$scope.lat = lat;
$scope.long = long;
localStorage.setItem(lat, $scope.lat);
localStorage.setItem(long, $scope.long);
//Kartenansicht erstellen
var mapOptions = {
center: startPos,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.map = map;
$ionicLoading.hide();
//erster Marker, der gespeichert wird
startMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: 'img/dot_green.png',
position: startPos,
});
//marker aus local storage anzeigen
$scope.save = function(){
var lat = localStorage.getItem($scope.lat);
var long = localStorage.getItem($scope.long);
var savedLoc = new google.maps.LatLng(lat, long);
savedMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: savedLoc,
});
}
//reload position
$scope.reload = function () {
var updLat = position.coords.latitude;
var updLong = position.coords.longitude;
if (updLat != lat && updLong != long) {
var movePos = new google.maps.LatLng(updLat, updLong);
console.log(updLat, updLong);
moveMarker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
icon: 'img/dot.png',
position: movePos,
});
}
}
//marker löschen
$scope.clear = function(){
savedMarker.setMap(null);
}
//vibration
$scope.toggle = function(){
$cordovaVibration.vibrate(1000);
}
});
});
});
Aucun commentaire:
Enregistrer un commentaire