在页面加载访问谷歌地图API与角 [英] Accessing a Google Maps API on pageload with Angular
问题描述
我想扔从用户的位置，考虑到谷歌地图API在页面加载经/纬度数据，但我坚持。
I'm trying to throw lat/long data taken from the user's location into the Google Maps API on page load but I'm stuck.
获取注射错误。我是pretty新角，但仍没有完全神交范围的事情是如何工作的，所以要温柔。
Getting an injection error. I'm pretty new to Angular and still don't entirely grok how the scope thing works, so be gentle.
我的主要文件app.js是在顶级目录：
My main file app.js is in a top level directory:
var app = angular.module('ForecastApp', []);
在一个控制器目录我有一个是从下面调用一个函数getZip主控制器：
In a controllers directory I have the main controller that's calling a getZip function from below:
app.controller('ForecastController', ['$scope', 'forecast', function($scope, forecast) {
$scope.getZip = function(){
forecast.getZip($scope.zipFinder).then(function(response){
$scope.response = response.data;
});
}
}]);
我有一个单独的顶层文件，getLocation.js，就是抓住从导航纬度长数据：
I have a separate top level file, getLocation.js, that is grabbing the lat long data from the navigator:
function getLocation(position) {
navigator.geolocation.getCurrentPosition(getLocation);
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var $latlng = lat + "," + lng; // will the variable carry over to the factory?
}
最后在这里我想一个工厂的文件包括纬度经度数据从一个API请求http.get。我怎么在这里得到了经纬度变量？我有一种感觉，这是所有搞砸。也许我不需要工厂吗？
Finally a factory file where I'm trying include the lat lng data into a http.get request from the API. How do I get the latlng variable here? I have a feeling this is all messed up. Maybe I don't need the factory?
app.factory('forecast', ['$http', function($http) {
function getZip(zipFinder) {
$http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + $latlng + '&key=XXXXXXXXXX')
.success(function(data){
return data;
})
}
}]);
该HTML：
<body onload="getLocation()" ng-app="ForecastApp">
<div ng-controller="ForecastController">
<div class="zipFinder" ng-model="zipFinder">
<h3>Your zip code is {{ zipFinder.result_type | postal_code }}</h3>
</div>
</div>
</body
我正在考虑合并的任何getLocation.js和工厂，以获得经纬度可变进范围，但它没有这样做。必须有一个办法让这两个在一起。
I was considering combining any getLocation.js and the factory to get the latlng variable into scope but it wasn't doing it. There must be a way to get those two together.
先谢谢了。
推荐答案
下面是谷歌地图的API在AngularJS项目工作的例子：
Here is a working example of google maps API in an AngularJS project:
http://plnkr.co/edit/34dcQZxHydMI9fFpj8Aq?p=$p$ PVIEW
MainCtrl的getMyAddr（）方法举例说明使用地理位置和地理code 的API而不需要任何新工厂的：
The getMyAddr () method of MainCtrl exemplify the use of geolocation and geocode API without any need of new factory:
$scope.getMyAddr = function() {
navigator.geolocation.getCurrentPosition(function(pos) {
var latlng = pos.coords.latitude +","+ pos.coords.longitude;
console.log('geolocation: '+latlng);
$http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng) // + '&key=XXXXXXXXXX')
.success(function(data){
console.log('geocode: ', data);
$scope.results = data.results;
if (!$scope.$$phase) $scope.$apply();
});
}, function(error) {
alert('Unable to get location: ' + error.message);
});
}
这篇关于在页面加载访问谷歌地图API与角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
