AngularJS，传单。如何从第三方服务动态获取纬度和经度坐标？
Posted
技术标签:
【中文标题】AngularJS，传单。如何从第三方服务动态获取纬度和经度坐标？【英文标题】：AngularJS, Leaflet. How can I get lat and lon coordinates dynamically from a third-party service? 【发布时间】：2015-12-14 06:32:36 【问题描述】：我有一个简单的应用程序通过纬度和经度坐标显示您当前的位置，并显示在地图上。 但目前它是静态的，必须手动指定坐标。 应用完整代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
<body ng-app="NearMeApp">
<div class="header">
<div class="container-fluid">
<h1 class="pull-left">NearMe</h1>
<a class="pull-right" href="#/about">About</a>
</div>
</div>
<div ng-view></div>
<script src="js/app.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/AboutController.js"></script>
</body>
</html>
pasteBin 上的 main.css
main.html
<div class="main">
<div class="container-fluid" id="map-canvas">
<leaflet center="mapCenter"></leaflet>
</div>
</div>
关于.html
<div class="about">
<div class="container-fluid">
<h1>Meet NearMe</h1>
<h2>The best place to discover new places around you.</h2>
<a class="btn btn-primary" href="#/">Start exploring</a>
</div>
</div>
app.js
var app = angular.module('NearMeApp', ['ngRoute', 'leaflet-directive']);
app.config(function($routeProvider)
$routeProvider
.when('/',
controller: 'MainController',
templateUrl: 'views/main.html'
)
.when('/about',
controller: 'AboutController',
templateUrl: 'views/about.html'
)
.otherwise(
redirectTo: '/'
);
);
关于Controller.js
app.controller('AboutController', ['$scope', function($scope)
]);
MainController.js
app.controller('MainController', ['$scope', function($scope)
$scope.mapCenter =
lat: 40.741934,
lng: -74.004897,
zoom: 17
;
]);
如何从第三方服务动态获取纬度和经度？比如来自JSON IP API
听说可以通过某种方式获取JSON数据
app.factory('latlon', ['$http', function($http)
return $http.get('http://ip-api.com/json')
.success(function(data)
return data;
)
.error(function(err)
return err;
);
]);
但我不知道该做什么以及如何在我的情况下使用它。 你能帮我解决这个问题吗？
已解决
问题已解决
MainController.js
app.controller('MainController', ['$scope', '$http', function($scope, $http)
$scope.mapCenter = ;
$http.get('http://ip-api.com/json')
.success(function(data)
$scope.mapCenter.lat = data.lat;
$scope.mapCenter.lng = data.lon;
$scope.mapCenter.zoom = 17;
);
]);
【问题讨论】：
【参考方案1】：不太清楚'我如何确保数据（经纬度）是动态的'是什么意思，但你可以使用HTML5 geolocation 函数：navigator.geolocation.getCurrentPosition(success[, error[, options]]) p>
您应该将其抽象为一个单独的服务或工厂，以使其更具可重用性并避免依赖于window
angular.module('app', []).factory('GeolocationService', ['$q', '$window', function ($q, $window)
function getPosition()
var deferred = $q.defer();
if (!$window.navigator.geolocation) // check if geolocation is supported
deferred.reject('Geolocation is not supported.');
return;
$window.navigator.geolocation.getCurrentPosition( // get the current position
function (position) // ok
deferred.resolve(position);
,
function (err) // error
deferred.reject(err);
);
return deferred.promise; // returned as a promise
return
getCurrentPosition: getCurrentPosition
;
]);
然后你可以像这样从你的控制器调用它
geolocationSvc.getPosition().then(
function success(position)
$scope.mapCenter =
lat: pos.coords.latitude,
lng: pos.coords.longitude,
zoom: 17
,
function error(err)
console.log('ERROR(' + err.code + '): ' + err.message);
);
请注意，此代码尚未经过实际测试，但应该为您提供如何实现的概要。
【讨论】：
Not quite sure what you mean by 'How can I make sure that the data (Lat and Lon) came dynamically' 是的，这是我的错字。我的意思是我想从第三方服务中动态获取纬度和经度（我在问题标题中的意思是一样的）。并将这些值分别写入$scope.mapCenter = lat: lat, lng: lon, zoom: 17 ;以上是关于AngularJS，传单。如何从第三方服务动态获取纬度和经度坐标？的主要内容，如果未能解决你的问题，请参考以下文章
传单地图'polygonData.default（data）中的错误：不知道如何从类data.frame的对象中获取路径数据'