| Feex | 13.02.2025 14:53 |
Геолокация с выводом точки на карту
Здравствуйте. Нужно получить Ширину и Долготу и вывести точку на карту (https://www.openstreetmap.org/#map=1...53400/2.348601).
Именно на эту карту(openstreetmap.org) - яндекс и гугл карты не подходят по ряду причин.
Что удалось найти:
Т.е. не подходит для моей задачи, хотя там используется именно та карта, которая мне нужна.
Еще нашел получение Широты и Долготы.
во втором примере не работает с HTTPS (на платной версии работает). но на странице HTML(http) выглядит так:
Как теперь это всё скрестить?)
Получение координат есть (HTTPS не нужен), карта есть, на которую нужно вывод сделать.
Помогите это всё совместить, плиз)
Я просто без понятия как подставить переменные из второго примера в карту из первого примера, и сделать это кликабельным на странице, чтобы открывалась карта с этими координатами. :-?
Именно на эту карту(openstreetmap.org) - яндекс и гугл карты не подходят по ряду причин.
Что удалось найти:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
padding: 20px;
background-color: #ffffc9;
}
button {
margin: 0.5rem 0;
}
</style>
</head>
<body>
<button id="find-me">Show my location</button><br />
<p id="status"></p>
<a id="map-link" target="_blank"></a>
<script type="text/javascript">
function geoFindMe() {
const status = document.querySelector("#status");
const mapLink = document.querySelector("#map-link");
mapLink.href = "";
mapLink.textContent = "";
function success(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
status.textContent = "";
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
}
function error() {
status.textContent = "Unable to retrieve your location";
}
if (!navigator.geolocation) {
status.textContent = "Geolocation is not supported by your browser";
} else {
status.textContent = "Locating…";
navigator.geolocation.getCurrentPosition(success, error);
}
}
document.querySelector("#find-me").addEventListener("click", geoFindMe);
</script>
</body>
</html>
Тут это всё реализовано, НО! эта функция доступна только в безопасном контексте (HTTPS)! Еще и часто выдает ошибки...Т.е. не подходит для моей задачи, хотя там используется именно та карта, которая мне нужна.
Еще нашел получение Широты и Долготы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="//code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<style type="text/css">
body {
font-family:Arial;
font-size:20px;
margin: 0;
padding: 0;
}
span {
font-weight: bold;"
font-size:20px;
}
</style>
</head>
<body>
<center><br>
<div class="title">INFORMATION:<br>
Latitude: <span class="lat"></span>, Longitude: <span class="lon"></span><br>
</div>
<script language="JavaScript">
$.getJSON("//ip-api.com/json/?lang=en&fields=lat,lon", function(data) {
var data_body = "";
$.each(data, function(k, v) {
data_body += "<b>" + k + "</b> : <i>" + v + "</i><br />";
});
$(".lat").html(data.lat);
$(".lon").html(data.lon);
});
</script>
</center>
</body>
</html>
во втором примере не работает с HTTPS (на платной версии работает). но на странице HTML(http) выглядит так:
Как теперь это всё скрестить?)
Получение координат есть (HTTPS не нужен), карта есть, на которую нужно вывод сделать.
Помогите это всё совместить, плиз)
Я просто без понятия как подставить переменные из второго примера в карту из первого примера, и сделать это кликабельным на странице, чтобы открывалась карта с этими координатами. :-?
