AngularJS显示用户在地图上的预定义坐标 [英] AngularJS show pre defined coordinates of user on the map
问题描述
我会在地图上显示预先定义的用户地图坐标，这是我的地图
map.html
<！DOCTYPE html>
<！ -
要更改此许可证标题，请在项目属性中选择许可证标题。
要更改此模板文件，请选择工具|模板
并在编辑器中打开模板。
- >
< html>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no，width = device-width>
< title>< / title>
< link href =lib / ionic / css / ionic.css =stylesheet>
< link href =css / style.css =stylesheet>
<！ - 如果使用Sass（首先运行gulp sass），然后在下面取消注释并移除包含上面的
< link href =css / ionic.app.css的CSS。的rel = 样式表 >
- >
<！ - 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脚本（在开发期间这将是一个404） - >
< script src =cordova.js>< / script>
<！ - - 您的应用程序的js - >
< script src =js / app.js>< / script>
< script src =js / controllers.js>< / script>
< script src =js / directives.js>< / script>
< / head>
< body ng-app =starterng-controller =MapCtrl>
< ion-header-bar class =bar-stable>
< h1 class =title>地图< / 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>
这是我的控制器
< b> 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：'获取当前位置...'，
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 （）;
}，函数（错误）{
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（$（$ stateProvider，$ urlRouterProvider，$ httpProvider，$ locationProvider）{
console.log（'test'）;
$ stateProvider
.state 'map'，{
url：'/ map'，
templateUrl：'map.html'，
controller：'MapCtrl'
}）
$ urlRouterProvider。 （'/ index'）;
}）;
$ b app.controller（'loginCtrl'，函数（$ scope，$ http，$ location，$ state）
{
$ scope。 data = {};
$ scope.postLogin = function（）
{
var data =
{
email：$ scope.data.email ，
密码：$ 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（
函数（响应）{
//成功回调
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）） ;
}，
函数（响应）{
//失败回调
console.log（'error'）;
alert（'invalid user'）;
//$location.path('/index'）;
}
）;
}
}）;
我应该在数据库中的任何用户的预定义位置添加什么内容。
提前考虑如果你想只为所有用户设置地图为相同的位置，那么你可以这样做：
：
var lat = 51.123456;
var lgt = 5.123456;
$ scope.map.setCenter（new google.maps.LatLng（lat，lgt））;
如果您想将其设置为单独为每个用户定义的位置，请先访问数据库并获取纬度如果我理解你的问题，那么你不需要 编辑： 这表明您还需要知道什么是您使用的id或用户名或身份用户。 I would show pre defined coordinates of user on the map when I logged it,this is my map map.html and this is my controller controllers.js loginController.js what should I add to pre defined location of any user in database.
Thinks in advance If you want to just set the map to same position for all users then you can do: 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 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 This shows that you also need to know what is the id or username or whatever identity you use of current user. 这篇关于AngularJS显示用户在地图上的预定义坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ navigator.geolocation.getCurrentPosition 因为你不想使用浏览器提供的位置。
<你的关于获取数据的问题非常广泛，但总体思路如下。您需要创建一些处理数据库的服务（例如 dataService ），您可以使用它来设置映射：
<$ （函数（数据）{
$ scope.map.setCenter（新增google.maps.LatLng（data.latitude，data.longitude））（p $ p $ dataService.loadUser（currentUserId）.then ）;
}）;
<!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>
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};
});
});
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');
}
);
}
});
var lat = 51.123456;
var lgt = 5.123456;
$scope.map.setCenter(new google.maps.LatLng(lat, lgt));
navigator.geolocation.getCurrentPosition at all as you don't want to use location provided by the browser.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));
});
