1

Имею на сайте карту с поиском, Возможно ли как то вытаскивать отдельно только имя города в котором отметились координаты на карте? Пробовал вот так

var places = searchBox.getPlaces();
siti = places[0].address_components[3].long_name;

Если вводить примерно такой адрес Тверская улица, 4, Москва, Россия, то срабатывает, но если адрес что то типо того Московская область, Мытищинский район, МКАД 84 км, ТПЗ Алтуфьево, владение 3, стр. 1.

places[0].address_components

такого свойства нет.

Вот собственно моя карта с поиском:

 function init() {
   var map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: {
       lat: 12.9715987,
       lng: 77.59456269999998
     },
     zoom: 12
   });

   var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
   map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
   google.maps.event.addListener(searchBox, 'places_changed', function() {
     searchBox.set('map', null);

     var places = searchBox.getPlaces();

     var bounds = new google.maps.LatLngBounds();
     var i, place;
     for (i = 0; place = places[i]; i++) {
       (function(place) {
         var marker = new google.maps.Marker({

           position: place.geometry.location
         });
         marker.bindTo('map', searchBox, 'map');
         google.maps.event.addListener(marker, 'map_changed', function() {
           if (!this.getMap()) {
             this.unbindAll();
           }
         });
         bounds.extend(place.geometry.location);

       }(place));
     }
     map.fitBounds(bounds);
     searchBox.set('map', map);
     map.setZoom(Math.min(map.getZoom(),12));
   });
 }
 google.maps.event.addDomListener(window, 'load', init);
html,
body,
#map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div class="container" id="map-canvas" style="height:300px;"></div>

1

2 ответа 2

3

Чтобы получить координаты определенного адреса используйте geocoder.geocode с промисом.

geocoder.geocode + promise:

function geocode(address) {
  let geocoder = new google.maps.Geocoder();

  return new Promise(function(resolve, reject) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        resolve(results);
      } else {
        reject(status);
      }
    });
  });
}

geocode("Тверская улица, 4, Москва, Россия")
  .then(resolve => {
    alert("Тверская улица, 4, Москва, Россия: " + resolve[0].geometry.location);
  })
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

Чтобы произвести обратное геокодирование, то есть координаты перевести в адрес используйте следующий код.

Reverse geocoding:

new google.maps.Geocoder().geocode({
  'latLng': new google.maps.LatLng(12.9715987, 77.594562699)
}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    console.log(results);
  }
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
В данном примере вы можете посмотреть какие данные содержит объект после исполнения запроса. Можете вытащить из него все что вам потребуется.

Пример для вашего случая:

function geocode(address) {
  let geocoder = new google.maps.Geocoder();

  return new Promise(function(resolve, reject) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        resolve(results);
      } else {
        reject(status);
      }
    });
  });
}

geocode("Тверская улица, 4, Москва, Россия")
  .then(resolve => {
    return resolve[0].geometry.location;
  })
  .then(resolve => {
    new google.maps.Geocoder().geocode({
      'latLng': resolve
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
          var country = null,
            countryCode = null,
            city = null,
            cityAlt = null;
          var c, lc, component;
          for (var r = 0, rl = results.length; r < rl; r += 1) {
            var result = results[r];

            if (!city && result.types[0] === 'locality') {
              for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                component = result.address_components[c];

                if (component.types[0] === 'locality') {
                  city = component.long_name;
                  break;
                }
              }
            } else if (!country && result.types[0] === 'country') {
              country = result.address_components[0].long_name;
              countryCode = result.address_components[0].short_name;
            }

            if (city && country) {
              break;
            }
          }

          document.getElementById('city').innerHTML = city;
          document.getElementById('country').innerHTML = country;
          document.getElementById('countryCode').innerHTML = countryCode;
        }
      }
    });
  })
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<ul id="x">
  <li>Город: <span id="city"></span></li>
  <li>Название страны: <span id="country"></span></li>
  <li>Код страны: <span id="countryCode"></span></li>
</ul>

Вы должны четко понимать, что есть адреса, которые территориально не находятся в городе (за городом и тд) и в этом случае вы в не можете получить город в котором имеется данный адрес, но вы можете получить название города, который является административным центром области, которому соответствует ваш адрес Московская область, Мытищинский район, МКАД 84 км, ТПЗ Алтуфьево, владение 3, стр. 1, используя result.types[i] === 'political'.

1
  • Конечно сейчас это уже не так актуально для меня, но возможно в будущем мне это пригодится спасибо 11 фев 2019 в 12:20
0

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

Если вводить примерно такой адрес "Тверская улица, 4, Москва, Россия", то срабатывает, но если адрес что то типо того "Московская область, Мытищинский район, МКАД 84 км, ТПЗ "Алтуфьево", владение 3, стр. 1", такого свойства нет.

Я проверил этот адрес с инструментом Latitude and Longitude of a Point of iTouchMap. В результате я получил координаты Тойота Моторс:

Карта Московской области, Тойота Моторс

Примените данный код из документации Гугл Places search box:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Searchbox</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 300px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
    <script>
      // This example adds a search box to a map, using the Google Place Autocomplete
      // feature. People can enter geographical searches. The search box will return a
      // pick list containing a mix of places and predicted search terms.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

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

        // 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();

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

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

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
         async defer></script>
  </body>
</html>

Если вы внесёте в поисковое поле фразу: "Московская область, Мытищинский район, Тойота Мотор", то карта выдаст вам это место. Данная фраза является локализацией для данного и конкретного предприятия Тойота Моторс. Возможно, вам следует отказаться от указания точных почтовых адресов и указывать в содержании веб-страниц фразы, которые локализуют конкретные предприятия, и которые будут соответствовать ожиданиям пользователей, ищущих предприятие по его названию и/или по бренду, а не по почтовому адресу (это мало кто знает).

1
  • Ну во первых вопрос заключался не в этом, и такое решение мне не подходит, так как карту использую во внутреннем приложении где создаются магазины с адресами и метками на карте. После чего отправляю данные обратно на сервис, Данных много , там телефоны директора менеджеры полный адрес, также есть необходимость отдельно отправлять город, в котором находится магазин, отдельной строки ввода города нет вот я и ищу как достать отдельно город из сервиса гугл 23 окт 2017 в 8:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.