使用Angular在页面加载中访问Google Maps API

我试图在页面加载时将从用户位置获取的经纬度数据放入Google Maps API，但我被卡住了。使用Angular在页面加载中访问Google Maps API

获取注射错误。对于Angular来说，我很新，但仍然没有完全理解示波器的工作原理，所以请温和。

我的主文件app.js是一个顶级目录：

var app = angular.module('ForecastApp', []);

在控制器目录中我会有从下面调用getZip功能主控制器：

app.controller('ForecastController', ['$scope', 'forecast', function($scope, forecast) { 
    $scope.getZip = function(){ 
    forecast.getZip($scope.zipFinder).then(function(response){ 
     $scope.response = response.data; 
    }); 
    } 
}]);

我有一个单独的顶级文件getLocation.js，它是从导航器中获取lat长数据：

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请求中。我如何在这里获得latlng变量？我有一种感觉，这一切都搞砸了。也许我不需要工厂？

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和工厂，以获得经纬度可变进范围，但它并没有这样做。必须有办法让这两个人在一起。

在此先感谢。

来源

2015-12-14 PanicBus

下面是谷歌地图API的一个AngularJS项目工作的例子：

http://plnkr.co/edit/34dcQZxHydMI9fFpj8Aq?p=preview

MainCtrl的getMyAddr（）方法举例说明使用地理位置和地理编码 API中没有任何需要的新工厂：

$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); 
    });

}

来源

2015-12-14 10:35:47 beaver

谢谢，伙计，这帮助。事实证明，我正在让它变得比它需要的更复杂。下面发布我的解决方案 – PanicBus

这是我的最终解决方案。事实证明，我正在让它变得比它需要的更复杂。

的JS

app.controller('ForecastController', function($scope, $http) { 
    $scope.getLocation = function() { 
    // get the location from the HTML navigator 
    navigator.geolocation.getCurrentPosition(function(pos) { 
    var latlng = pos.coords.latitude +","+ pos.coords.longitude; 
    // and plug it into the GMaps API call 
    $http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng + '&key=XXXXXXXX') 
    .success(function(data){ 
     $scope.results = data.results; 
     $scope.quantity = 1; 
    }); 
    } 
});

的HTML

<div ng-init="getLocation()"> 
    <div ng-repeat="result in results | limitTo:quantity"> 
    <h2>Your zip code is {{ result.address_components[7].long_name }}</h2> 
    </div> 
</div>

来源

2015-12-27 07:45:01 PanicBus

使用Angular在页面加载中访问Google Maps API

回答

相关问题