Skip to content

Instantly share code, notes, and snippets.

@cave2006
Created August 2, 2023 15:30
Show Gist options
  • Save cave2006/f29a744a92f2647d57c55c218dc1e34b to your computer and use it in GitHub Desktop.
Save cave2006/f29a744a92f2647d57c55c218dc1e34b to your computer and use it in GitHub Desktop.
Выбрать адрес на карте
<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>
// Замените на свой 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());
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=83e36425-db81-4330-9ca6-5c13fba0e1d6"></script>
#map {
width: 100%;
height: 400px;
border: 1px solid #eaeaea;
}
input {
font-size: 16px;
padding: 4px;
}
<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@latest/dist/css/suggestions.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment