Доступ к API Карт Google при загрузке страницы с помощью Angular

Я пытаюсь выбросить данные широты и долготы, взятые из местоположения пользователя, в API Карт Google при загрузке страницы, но я застрял.

Получение ошибки инъекции. Я довольно новичок в 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 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?
}

Наконец, заводской файл, в котором я пытаюсь включить латинские данные в запрос http.get от API. Как мне получить переменную 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 в области видимости, но это не было сделано. Должен быть способ собрать этих двоих вместе.

Заранее спасибо.

Источник

2 ответа

Решение

Вот рабочий пример API карт Google в проекте AngularJS:

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

Метод getMyAddr () MainCtrl иллюстрирует использование геолокации и геокодирования 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>
Источник
Другие вопросы по тегам