Блог

Я пытаюсь использовать службу Google Maps API, чтобы посетители моего сайта могли вводить свой адрес в поле. Как только он / она выберет соответствующий адрес, я хочу получить latitude и longitude информацию о предоставленном адресе.

Используя код из документации по API, я получил карту и текстовое поле на своем сайте. Однако, как только Google найдет соответствующий адрес, мне нужно получить latitude и longitude информацию только для выбранного адреса.

Вот функция, которая инициализирует карту

 function initMap() {

    var mapElement = document.getElementById('map');

    var map = new google.maps.Map(mapElement, {
      center: {
        lat: -34.397, 
        lng: 150.644
      },
      zoom: 6
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map
    });

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {

      var places = searchBox.getPlaces();

      console.log(places);
      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {

        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        /*
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };
        */


        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          //icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        //coords.latitude

        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();  

        console.log(latitude, longitude);

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }

      });

      map.fitBounds(bounds);

    });


}
  

Следующие строки кода дали мне информацию, которую я ищу. Однако, похоже, что он отображает это чаще, чем один раз (возможно, он отображает информацию для нескольких адресов). Как я могу получить latitude и longitude информацию только по одному адресу?

    var latitude = place.geometry.location.lat();
   var longitude = place.geometry.location.lng();  
  

Я попытался добавить прослушиватель кликов, где я могу получить информацию о событии lick следующим образом

     map.addListener("click", function (event) {
        var lat = event.latLng.lat();
        var lng = event.latLng.lng();

        console.log(lat, lng);
    });
  

Однако это дает мне latitude и longitude места, где я нажимаю на карту, а не адрес, который я выбрал из текстового поля после того, как автозаполнение предложило соответствующие адреса

Я уверен, что есть более простой способ, но я использую maps.google.com и щелкните правой кнопкой мыши там, где я хочу найти координаты, и выберите что здесь?, тогда долгота и широта появятся внизу карты.

Используя API Google, вы можете просто отправить AJAX-запрос, вам не нужна карта на вашей странице, чтобы получить координаты. Проверьте это!

https://maps.googleapis.com/maps/api/geocode/json?address=1600 Amphitheatre Parkway, Mountain View, CAamp;key=YOUR_API_KEY

 var responseAsObject;
$("#div").load( "url", function( response, status, xhr ) {
responseAsObject = $.parseJSON(response);
});
var long = responseAsObject.results.geometry.location.lng;
var lat = responseAsObject.results.geometry.location.lat;