Выбрать адрес на карте

.markdown

Выбрать адрес на карте

A Pen by cave2006 on CodePen.

License.

index.html

<section class="container">
  <h1>Выбрать адрес на карте</h1>
  <p>Нажмите на дом, чтобы выбрать адрес доставки:</p>
  <div id="map"></div>
  <p style="font-size:3rem;margin:0;padding:0">Вы выбрали адрес: <span id="address"></span></p>
  <p>GEO: <span id="geoaddress"></span></p>
    <p>Ссылка на карту: <span id="geolink"></span></p>
</section>

script.js

// Замените на свой API-ключ
var token = "7fd18aaabd7d53ffa4846e4521c1f736c13490eb";

ymaps.ready(init);
var map;

function init () {
    map = new ymaps.Map("map", {
        center: [55.742245, 37.628056],
        zoom: 15,
      controls: ['zoomControl',  'typeSelector',  'fullscreenControl', 'routeButtonControl']}, {
        searchControlProvider: 'yandex#search',
         balloonMaxWidth: 200,
      yandexMapDisablePoiInteractivity: true
    });

    // Обработка события, возникающего при щелчке
    // левой кнопкой мыши в любой точке карты.
    // При возникновении такого события показываем
    // текстовый адрес под картой.
    map.events.add('click', function (e) {
      map.balloon.close();
        var coords = e.get('coords');
        loadAddress(coords[0], coords[1]);
        
              if (!map.balloon.isOpen()) {
            var coords = e.get('coords');
            var geocoords = [
                    coords[0].toPrecision(6),
                    coords[1].toPrecision(6)
                    ].join(', ');
        var geolink = [
                    coords[0].toPrecision(6),
                    coords[1].toPrecision(6)
                    ].join(',');
         document.getElementById("geoaddress").textContent = geocoords;
         document.getElementById("geolink").textContent = "http://maps.yandex.ru/?text=" + geolink;
            map.balloon.open(coords, {
                contentHeader:'Точка доставки',
                contentBody:'<p>Постарайтесь максимально точно поставить точку, так курьер сможет Вас найти:</p>' +
                    '<p><b>Координаты:</b> ' + [
                    coords[0].toPrecision(6),
                    coords[1].toPrecision(6)
                    ].join(', ') + '</p>',
                contentFooter:'<p>Проверьте обязательно Ваш адрес, если адрес верный, оставьте данную подсказку открытой :)</p>'
            });
        }
        else {
            map.balloon.close();
        }
      
    });
  
    var accessor = map.cursors.push("arrow");
  
      
    // Скрываем хинт при открытии балуна.
    map.events.add('balloonopen', function (e) {
        map.hint.close();
    });
  
}

function loadAddress(lat, lon) {
  var promise = geolocate(lat, lon);
  promise
    .then(function(response) {
      if (response.suggestions.length) {
        showAddress(response.suggestions[0]);
      } else {
        document.getElementById("address").textContent = "дом не найден";
      }
    })
    .catch(function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus);
      console.log(errorThrown);
    });
}

function showAddress(suggestion) {
  var address = suggestion.value;
  if (suggestion.data.postal_code) {
    address = suggestion.data.postal_code + ", " + address;
  }
  document.getElementById("address").textContent = address;
}

function geolocate(lat, lon) {
  var serviceUrl = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/geolocate/address";
  var request = {
    "lat": lat,
    "lon": lon
  };
  var params = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Token " + token
    },
    body: JSON.stringify(request)
  };
  return fetch(serviceUrl, params).then(response => response.json());
}

scripts

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=83e36425-db81-4330-9ca6-5c13fba0e1d6"></script>

style.css

#map {
  width: 100%;
  height: 400px;
  border: 1px solid #eaeaea;
}

input {
  font-size: 16px;
  padding: 4px;
}

styles

<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@latest/dist/css/suggestions.min.css" rel="stylesheet" />