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

Accessing a Google Maps API on pageload with Angular

本文关键字：访问 Google Maps API 加载 Angular 使用      更新时间：2023-09-26

我试图在页面加载时将从用户位置获取的lat/long数据放入Google Maps API，但我被卡住了。

正在获取注入错误。我对Angular还很陌生，仍然不完全了解scope是如何工作的，所以要温和一点。

我的主文件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-long数据：

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

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

提前谢谢。

下面是AngularJS项目中google地图API的一个工作示例：

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

}

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

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>
相关文章：