Issue
I would show pre defined coordinates of user on the map when I logged it, this is my map
map.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<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=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></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-stable">
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content scroll="false">
<map on-create="mapCreated(map)"></map>
</ion-content>
<ion-footer-bar class="bar-stable">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
</ion-footer-bar>
</body>
</html>
and this is my controller
controllers.js
angular.module('starter.controllers', [])
.controller('MapCtrl', function($scope, $ionicLoading, $cordovaGeolocation) {
$scope.mapCreated = function(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,geolocation) {
geolocation.getLocation().then(function(data){
$scope.coords = {lat:data.coords.latitude, long:data.coords.longitude};
});
});
loginController.js
var app=angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){
console.log('test');
$stateProvider
.state('map', {
url: '/map',
templateUrl: 'map.html',
controller: 'MapCtrl'
})
$urlRouterProvider.otherwise('/index');
});
app.controller('loginCtrl', function ($scope,$http,$location,$state)
{
$scope.data = {};
$scope.postLogin = function ()
{
var data =
{
email: $scope.data.email,
password: $scope.data.password,
lat: $scope.data.latitude,
lang: $scope.data.langitude
};
console.log('bonjour');
$http.post("http://localhost/authproject/public/api/auth/login", data)
.then(
function(response){
// success callback
console.log('success');
$location.path('/map');
$scope.data.latitude=response.latitude;
$scope.data.langitude=response.langitude;
$scope.map.setCenter(new google.maps.LatLng(data.lat, data.long));
},
function(response){
// failure callback
console.log('error');
alert('invalid user ');
//$location.path('/index');
}
);
}
});
What should I add to pre defined location of any user in the database?
Solution
If you want to just set the map to same position for all users then you can do:
var lat = 51.123456;
var lgt = 5.123456;
$scope.map.setCenter(new google.maps.LatLng(lat, lgt));
If you want to set it to location defined for each user separately then first access the DB and get latitude and longitude for user and set there.
If I understand your question right, then you don't need navigator.geolocation.getCurrentPosition at all as you don't want to use location provided by the browser.
EDIT:
Your question about getting data is very broad but the general idea is as follows. You need to create some service that handles database (for example dataService) and you can use it to set map:
dataService.loadUser(currentUserId).then(function(data) {
$scope.map.setCenter(new google.maps.LatLng(data.latitude, data.longitude));
});
This shows that you also need to know what is the id or username or whatever identity you use of current user.
Answered By - Episodex
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.