Question

我在登录时会在地图上显示用户的预定义坐标，这是我的地图

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>

这是我的控制器

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');

           }
        );



    }

});

我应该将什么添加到数据库中任何用户的预定义位置。提前考虑

Answer 1

如果您只想将地图设置为所有用户的相同位置，则可以执行以下操作：

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

如果要将其分别设置为为每个用户定义的位置，请先访问数据库并获取用户的经度和经度并设置在那里。

如果我理解您的问题，那么您根本不需要navigator.geolocation.getCurrentPosition，因为您不想使用浏览器提供的位置。

编辑：

关于获取数据的问题非常广泛，但总体思路如下。您需要创建一些处理数据库的服务（例如dataService），您可以使用它来设置地图：

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

这表明您还需要知道您使用当前用户的id或用户名或身份。

AngularJS在地图上显示用户的预定义坐标

1 个答案: