Google map Предварительный просмотр выбранного местоположения на карте

Question

Я бы хотел, чтобы мой пользователь мог выбрать местоположение, а также просмотреть искомое местоположение, чтобы выбрать местоположение.

Проблема Я не могу интегрировать окно поиска для предварительного просмотра искомогоместоположение.

Код, который я использую

<input type="text" id="search">
<div id="map"></div>

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

var lp = new locationPicker(map, {
    setCurrentPosition: true,
    lat: -13.9867852,
    lng: 33.77027889
}, {
    zoom: 15 // You can set any google map options here, zoom defaults to 15
});

// Listen to button onclick event
confirmBtn.onclick = function () {
    var location = lp.getMarkerPosition();
    var location = location.lat + ',' + location.lng;
    console.log(location);
};

google.maps.event.addListener(lp.map, 'idle', function (event) {
    var location = lp.getMarkerPosition();
    var location = location.lat + ',' + location.lng;
    console.log(location);
});

Как включить ввод для поиска местоположения и отобразить его на карте

Редактировать,Удалось включить поиск по входу, но не удалось переместить маркер в выбранное место

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
    var input = document.getElementById('search');
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.setComponentRestrictions({'country':['mw']});
    autocomplete.addListener('place_changed', function () {
        var place = autocomplete.getPlace();
        /*
        console.log(place.geometry['location'].lat());
        console.log(place.geometry['location'].lng());
        console.log(place.name);
        console.log(place.formatted_address);
        console.log(place.vicinity);
        console.log(place.url);
        console.log(place.address_components);*/
        if(!place.geometry) {
            return;
        }


        console.log(place);
    });
}

Answer 1

Пожалуйста, ознакомьтесь с этим примером fiddle , в котором есть окно поиска и карта. Когда пользователь выбирает предложение места при вводе автозаполнения, образец затем вызывает метод getPlace (), а затем открывает информационное окно для отображения сведений о месте.

Вы можете создать информационное окно, чтобы отобразить некоторые сведения о месте:

  <input id="search" type="text" placeholder="Enter a location">

  <div id="map"></div>
  <div id="infowindow-content">
    <img src="" width="16" height="16" id="place-icon">
    <span id="place-name" class="title"></span><br>
    <span id="place-address"></span>
  </div>

  <!-- Replace the value of the key parameter with your own API key. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize" async defer></script>
  </body>

В функции initialize () объявите ваши объекты infowindow и marker, а затем установите позицию маркера и содержимое информационного окна в приемнике place_changed, который вызывается всякий раз, когда пользователь выбираетпредложение автозаполнения адреса.

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -13.9867852, lng: 33.77027889},
    zoom: 15
  });

  var input = document.getElementById('search');
  var autocomplete = new google.maps.places.Autocomplete(input);

  // Set the data fields to return when the user selects a place.
  autocomplete.setFields(
      ['address_components', 'geometry', 'icon', 'name']);

  autocomplete.setComponentRestrictions({
    'country': ['mw']
  });    

  var infowindow = new google.maps.InfoWindow();
  var infowindowContent = document.getElementById('infowindow-content');
  infowindow.setContent(infowindowContent);
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindowContent.children['place-icon'].src = place.icon;
    infowindowContent.children['place-name'].textContent = place.name;
    infowindowContent.children['place-address'].textContent = address;
    infowindow.open(map, marker);
  });
}  

Вы также можете проверить этот пример из общедоступной документации.

Надеюсь, это поможет!