Парсинг address_components в Картах Google после выбора автозаполнения - PullRequest
Новая
       0

Парсинг address_components в Картах Google после выбора автозаполнения

13 голосов
/ 10 ноября 2011

У меня есть следующий код для разбора country при выборе списка автозаполнения: 

$('#spot_address').autocomplete({
  // This bit uses the geocoder to fetch address values
  source: function(request, response) {
    geocoder.geocode( {'address': request.term }, function(results, status) {
      // Get address_components
      for (var i = 0; i < results[0].address_components.length; i++)
      {
        var addr = results[0].address_components[i];
        var getCountry;
        if (addr.types[0] == 'country') 
          getCountry = addr.long_name;
      }
      response($.map(results, function(item) {
        return {
          label: item.formatted_address,
          value: item.formatted_address,
          latitude: item.geometry.location.lat(),
          longitude: item.geometry.location.lng(),
          country: getCountry
        }
      }));
    })
  },

  // This bit is executed upon selection of an address
  select: function(event, ui) {
    // Get values
    $('#spot_country').val(ui.item.country);
    $('#spot_lat').val(ui.item.latitude);
    $('#spot_lng').val(ui.item.longitude);
    var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
    marker.setPosition(location);
    map.setCenter(location);
  },

  // Changes the current marker when autocomplete dropdown list is focused
  focus: function(event, ui) {
    var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
    marker.setPosition(location);
    map.setCenter(location);
  }
});

Однако приведенный выше код не работает, и при разборе страны анализируется только первый результат автозаполнения, независимо от того, что важно для массива results[0], поскольку он выбирает только первый результат.

Я пытался переместить его в функцию select, но ui в select содержит только formatted_address, longitude и latitude, но не address_components.

Что я должен сделать, чтобы отправить правильный country, когда выбран элемент списка автозаполнения?

Большое спасибо.

Ответы [ 13 ]

75 голосов
/ 08 мая 2013

Общее решение: 

var address_components = results[0].address_components;
var components={}; 
jQuery.each(address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});});

Теперь ваш components выглядит следующим образом: 

street_number: "1100", 
route: "E Hector St", 
locality: "Conshohocken", 
political: "United States", 
administrative_area_level_3: "Whitemarsh"…
administrative_area_level_1: "Pennsylvania"
administrative_area_level_2: "Montgomery"
administrative_area_level_3: "Whitemarsh"
country: "United States"
locality: "Conshohocken"
political: "United States"
postal_code: "19428"
route: "E Hector St"
street_number: "1100"

Который вы можете запросить так: 

components.country
7 голосов
/ 11 ноября 2011

Вот я снова отвечаю на свой вопрос.Ниже приведен полный рабочий код: 

$('#spot_address').autocomplete({
  // This bit uses the geocoder to fetch address values
  source: function(request, response) {
    geocoder.geocode( {'address': request.term }, function(results, status) {
      response($.map(results, function(item) {
          // Get address_components
          for (var i = 0; i < item.address_components.length; i++)
          {
            var addr = item.address_components[i];
            var getCountry;
            if (addr.types[0] == 'country') 
              getCountry = addr.long_name;
          }
        return {
          label: item.formatted_address,
          value: item.formatted_address,
          latitude: item.geometry.location.lat(),
          longitude: item.geometry.location.lng(),
          country: getCountry
        }
      }));
    })
  },

  // This bit is executed upon selection of an address
  select: function(event, ui) {
    // Get values
    $('#spot_country').val(ui.item.country);
    $('#spot_lat').val(ui.item.latitude);
    $('#spot_lng').val(ui.item.longitude);
    var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
    marker.setPosition(location);
    map.setCenter(location);
  },

  // Changes the current marker when autocomplete dropdown list is focused
  focus: function(event, ui) {
    var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
    marker.setPosition(location);
    map.setCenter(location);
  }
});
5 голосов
/ 21 мая 2016

Обработка ответа @Full Decent здесь для lodash: 

_.each(address_components, function(k, v1) {
    _.each(address_components[v1].types, function(k2, v2){
        components[address_components[v1].types[v2]] = address_components[v1].long_name
    });
});
3 голосов
/ 21 июля 2015

В контроллере AngularJS это может выглядеть так: 

function NewController() {
  var vm = this;

  vm.address = null;
  vm.placeService  = null;

  activate();

  function activate() {
    vm.placeService = new google.maps.places.PlacesService(document.getElementById("map"));
  }

  function getAddressComponent(address, component, type) {
    var element = null;
    angular.forEach(address.address_components, function (address_component) {
      if (address_component.types[0] == component) {
        element = (type == 'short') ? address_component.short_name : address_component.long_name;
      }
    });

    return element;
  }

  function getAddressDetail(addressId) {
    var request = {
      placeId: addressId
    };

    vm.placeService.getDetails(request, function(place, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        vm.address = {
          countryCode: getAddressComponent(place, 'country', 'short'),
          countryName: getAddressComponent(place, 'country', 'long'),
          cityCode: getAddressComponent(place, 'locality', 'short'),
          cityName: getAddressComponent(place, 'locality', 'long'),
          postalCode: getAddressComponent(place, 'postal_code', 'short'),
          streetNumber: getAddressComponent(place, 'street_number', 'short')
        };
        console.log(vm.address);
      }
    });
  }
}
2 голосов
/ 02 января 2019

Здесь я сделал свое собственное решение, так как хотел получить название города, и для этого может быть несколько форматов, например, название города в некоторых регионах может быть под именем 

 (locality, sublocality , sublocality_level_1, sublocality_level_2, sublocality_level_3
 or sublocality_level_4)

поэтому я сделал эту функцию 

getAddressObject(address_components) {
  var ShouldBeComponent = {
    home: ["street_number"],
    postal_code: ["postal_code"],
    street: ["street_address", "route"],
    region: [
      "administrative_area_level_1",
      "administrative_area_level_2",
      "administrative_area_level_3",
      "administrative_area_level_4",
      "administrative_area_level_5"
    ],
    city: [
      "locality",
      "sublocality",
      "sublocality_level_1",
      "sublocality_level_2",
      "sublocality_level_3",
      "sublocality_level_4"
    ],
    country: ["country"]
  };

  var address = {
    home: "",
    postal_code: "",
    street: "",
    region: "",
    city: "",
    country: ""
  };
  address_components.forEach(component => {
    for (var shouldBe in ShouldBeComponent) {
      if (ShouldBeComponent[shouldBe].indexOf(component.types[0]) !== -1) {
        address[shouldBe] = component.long_name;
      }
    }
  });
  console.log(address);
  return address;
}
2 голосов
/ 08 ноября 2018

Вот мое решение в машинописи 

interface AddressComponent {
  long_name: string;
  short_name: string;
  types: Array<string>;
}

interface Address {
  street_number?: string;
  street_name?: string;
  city?: string;
  state?: string;
  country?: string;
  postal_code?: string;
}

export class GoogleAddressParser {
  private address: Address = {};

  constructor(private address_components: Array<AddressComponent>) {
    this.parseAddress();
  }

  private parseAddress() {
    if (!Array.isArray(this.address_components)) {
      throw Error('Address Components is not an array');
    }

    if (!this.address_components.length) {
      throw Error('Address Components is empty');
    }

    for (let i = 0; i < this.address_components.length; i++) {
      const component: AddressComponent = this.address_components[i];

      if (this.isStreetNumber(component)) {
        this.address.street_number = component.long_name;
      }

      if (this.isStreetName(component)) {
        this.address.street_name = component.long_name;
      }

      if (this.isCity(component)) {
        this.address.city = component.long_name;
      }

      if (this.isCountry(component)) {
        this.address.country = component.long_name;
      }

      if  (this.isState(component)) {
        this.address.state = component.long_name;
      }

      if (this.isPostalCode(component)) {
        this.address.postal_code = component.long_name;
      }
    }
  }

  private isStreetNumber(component: AddressComponent): boolean {
    return component.types.includes('street_number');
  }

  private isStreetName(component: AddressComponent): boolean {
    return component.types.includes('route');
  }

  private isCity(component): boolean {
    return component.types.includes('locality');
  }

  private isState(component): boolean {
    return component.types.includes('administrative_area_level_1');
  }

  private isCountry(component): boolean {
    return component.types.includes('country');
  }

  private isPostalCode(component): boolean {
    return component.types.includes('postal_code');
  }

  result(): Address {
    return this.address;
  }
}

Использование: 

const address = new GoogleAddressParser(results[0].address_components).result();
1 голос
/ 07 апреля 2017

Я использовал следующий подход: 

var city = getAddressComponent(place, 'locality', 'long_name');
var state = getAddressComponent(place, 'administrative_area_level_1', 'short_name');
var postalCode = getAddressComponent(place, 'postal_code', 'short_name');
var country = getAddressComponent(place, 'country', 'long_name');

function getAddressComponent(place, componentName, property) {
  var comps = place.address_components.filter(function(component) {
    return component.types.indexOf(componentName) !== -1;
  });

  if(comps && comps.length && comps[0] && comps[0][property]) {
    return comps[0][property];
  } else {
    return null;
  }
}
1 голос
/ 19 июня 2016

Это сработало для меня, в AngularJS; 

// Function converts GPS co-ordinates to a locality name
function showLocation(LatLng) {
    geocoder.geocode({'latLng': LatLng}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0]);
            var myLocation;

            for (var i = 0; i < results[0].address_components.length; i++) {
                var addr = results[0].address_components[i];
                var getCountry;
                var getAdministrative;
                var getLocality;

                if (addr.types[0] == 'locality') {
                    getLocality = addr.long_name;
                    console.log(getLocality);
                    myLocation = getLocality+ ', ';
                }
                 if (addr.types[0] == 'administrative_area_level_1') {
                    getAdministrative = addr.long_name;
                    console.log(getAdministrative);
                    myLocation += getAdministrative + ', ';
                } 
                if (addr.types[0] == 'country') {
                    getCountry = addr.long_name;
                    console.log(getCountry);
                    myLocation += getCountry;
                }                             
            }
            $scope.locality = myLocation;
            console.log(myLocation);
        }
    })
};
0 голосов
/ 28 июня 2019

Вот решение для ES6 и jQuery (на основе поста Уильяма Энтрикена ), использующее встроенную функцию reduce и деструктурирующее назначение синтаксисчтобы распаковать свойства из объектов в различные переменные: 

const address = address_components.reduce((seed, { long_name, types }) => {
  types.forEach(t => {
    seed[t] = long_name;
  });

  return seed;
}, {});

Или однострочная версия (для чего она стоит): 

const address = address_components.reduce((seed, { long_name, types }) => (types.forEach(t => seed[t] = long_name), seed), {});

, которую затем можно использовать как: 

address.street_number
address.city
0 голосов
/ 22 мая 2019

Мы также можем извлечь идентификатор страны и код штата с помощью этого - 

  const address_components = results[0].address_components;
  let components = {};
  address_components.map((value, index) => {
    value.types.map((value2, index2) => {
      components[value2] = value.long_name;
      if (value2==='country')
        components.country_id = value.short_name;
      if (value2==='administrative_area_level_1')
        components.state_code = value.short_name;
    })
  })

Возвращает этот объект - 

{
  administrative_area_level_1: "California"
  administrative_area_level_2: "Santa Clara County"
  country: "United States"
  country_id: "US"
  locality: "Mountain View"
  political: "United States"
  postal_code: "94043"
  route: "Amphitheatre Parkway"
  state_code: "CA"
  street_number: "1600"
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...