使用 Angular 在页面加载时访问 Google Maps API答案

【问题标题】：Accessing a Google Maps API on pageload with Angular使用 Angular 在页面加载时访问 Google Maps API
【发布时间】：2015-12-14 03:21:53
【问题描述】：

我试图在页面加载时将取自用户位置的纬度/经度数据放入 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，它从导航器中获取经纬度数据：

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?
}

最后是一个工厂文件，我正在尝试将 lat lng 数据包含到来自 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 和工厂结合起来以将 latlng 变量纳入范围，但它没有这样做。一定有办法把这两者结合起来。

提前致谢。

【问题讨论】：

标签： javascript angularjs google-maps google-api

【解决方案1】：

这是一个 AngularJS 项目中的 google maps API 的工作示例：

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

MainCtrl 的getMyAddr() 方法举例说明了geolocation 和geocode 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);
    });

}

【讨论】：

谢谢老兄，帮了大忙。事实证明，我让它变得比它需要的复杂得多。在下面发布我的解决方案。

【解决方案2】：

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

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>

【讨论】：