2016-07-12 5 views
-1

I vordefinierten Koordinaten des Benutzers auf der Karte zeigen würde, wenn ich es angemeldet, das ist meine KarteAngularJS zeigen vordefinierte Koordinaten des Benutzers auf der Karte

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> 

und dies ist mein 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'); 

      } 
     ); 



    } 

}); 

was soll ich definierten Stelle von jedem Benutzer in der Datenbank vorzunehmen hinzuzufügen. Thinks im Voraus

+0

jede Hilfe bitte :) – Sarah

+0

Was genau brauchen Sie? Code, um Daten aus der Datenbank zu bekommen und sie dann in der Karte zu verwenden? – Episodex

+0

Ich habe viele Benutzer in meiner Datenbank Ich möchte, wenn ich mit einem Benutzer angemeldet bin ich auf statische Geolocation zugreifen, die ich vordefiniert in Karte oder sollte ich verwenden Google Map Image basierend auf Adresse – Sarah

Antwort

1

Wenn Sie möchten, setzen Sie einfach die Karte auf gleiche Position für alle Benutzer, dann können Sie tun:

var lat = 51.123456; 
var lgt = 5.123456; 
$scope.map.setCenter(new google.maps.LatLng(lat, lgt)); 

Wenn Sie es Lage für jeden Benutzer definiert festlegen möchten separat dann erste Zugriffs die DB und Breitengrad und Längengrad für Benutzer und legen Sie dort fest.

Wenn ich Ihre Frage richtig verstanden habe, dann brauchen Sie überhaupt nicht navigator.geolocation.getCurrentPosition, da Sie den vom Browser bereitgestellten Standort nicht verwenden möchten.

EDIT:

Ihre Frage zu Daten bekommen ist sehr breit, aber die allgemeine Idee ist wie folgt. Sie benötigen einen Dienst zu erstellen, die Datenbank behandelt (zB dataService) und Sie können es Karte setzen verwenden:

dataService.loadUser(currentUserId).then(function(data) { 
    $scope.map.setCenter(new google.maps.LatLng(data.latitude, data.longitude)); 
}); 

Dies zeigt, dass Sie müssen auch wissen, was die ID oder Benutzernamen oder was auch immer Identität Sie nutzen aktueller Benutzer

+0

denkt für Ihre Antwort, ich möchte es für jeden Benutzer separat festgelegt, ich werde Breite und Länge für Benutzer in der Datenbank hinzufügen und dann was die Funktion hinzugefügt werden sollte in controllers.js – Sarah

+0

kann jemand mir antworten – Sarah

+0

Siehe meine aktualisiert Antworten. – Episodex

Verwandte Themen