Я пытаюсь получить долготу и широту в URL-адресе. До сих пор я наткнулся на много разных тем в Интернете, но ничего не работает. Я публикую здесь html, который отображает проблему.
вывод после нажатия кнопки «Показать позицию» показывает вашу позицию и меняет URL-адрес в браузере с этой долготой и широтой
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
</head>
<script>
function showPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
document.getElementById("result").innerHTML = positionInfo;
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
const gotoURL = new URL(window.location.href);
gotoURL.searchParams.set('longitude', longitude);
gotoURL.searchParams.set('latitude', latitude);
window.location.href = gotoURL;
});
} else {
alert("Sorry, your browser does not support HTML5 geolocation.");
}
}
</script>
</head>
<body>
<div id = "result">
<!--Position information will be inserted here-->
<!--Position information will be inserted here-->
</div>
<button type = "button" onclick = "showPosition();">Show Position</button>
</body>
</html>
window.location.href = "177.0.0.6:5001"+долгота - так? у него нет выхода...
См. ответ @Энди.
На самом деле неясно, хотите ли вы сразу перейти на новую страницу (в этом случае обновление элементов DOM на текущей странице бесполезно) или хотите вернуть строку URI. getCurrentPosition
— это асинхронный процесс, поэтому, если это последнее, вам нужно будет использовать обещание или асинхронное/ожидание, чтобы получить эту информацию обратно.
Эй, Энди, это может быть первым. Немедленное перенаправление на новую страницу с помощью http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude}
Я попробовал фрагмент вашего ответа ниже ... но он не работает ... Я думаю, отсутствует window.location?
const uri = `http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude}`;
Ой! У вас нет переменной с именем lattitude
.
Вы можете упростить себе задачу, переписав деструктурирование свойства объекта coords
...
const { latitude, longitude } = position.coords;
... и используйте их в строке шаблона. И сэкономьте немного кода, чтобы повторять вещи.
Таким образом, ваш код может выглядеть так.
const result = document.getElementById('result');
const lat = document.getElementById('lat');
const lng = document.getElementById('lng');
navigator.geolocation.getCurrentPosition(function(position) {
const { latitude, longitude } = position.coords;
const positionInfo = `Your current position is Latitude: ${latitude}, Longitude: ${longitude}`;
result.textContext = positionInfo;
lat.textContent = latitude;
lng.textContent = longitude;
const uri = `http://177.0.0.6:5001/?lng=${longitude}&lng=${latitude}`;
});
Дорогой Энди, спасибо за помощь. Я не уверен, правильно ли я вас понял. Я пытался включить ваш код разными способами, но ни один из них не дал мне никакого результата... Думаю, я слишком новичок... Не могли бы вы посмотреть, правильно ли я понял полный html? Я обновлю свой код выше.
Какой результат вы ожидаете? Вы сказали в своем комментарии, что хотели немедленно перенаправить на новую страницу. Добавлять контент на текущую страницу бессмысленно, если вы его не увидите. Вы хотели записать данные в localStorage, чтобы новая страница могла получить к ним доступ или что-то в этом роде? @enving
Здесь есть несколько неправильных вещей... но давайте попробуем разобраться с ними для вас...
Элементов не существует. Я предполагаю, что они уже существовали до того, как вы разместили это на SO. Как было сказано выше, они вызывают поломку Javascript.
var long = (document.getElementById('longi').innerHTML = position.coords.longitude);
var lat = (document.getElementById('latti').innerHTML = position.coords.latitude);
Вы устанавливаете кучу (отладочного?) текста, а ЗАТЕМ (пытаетесь) изменить URL-адрес. Если все работает правильно, вы не увидите текст или увидите его на мгновение.
var positionInfo = ...
Когда вы пытаетесь изменить местоположение, переменные, которые вы пытаетесь использовать (долгота и широта), не существуют. Это связано с тем, что переменные, объявленные внутри функции, существуют только в этой функции (области действия). Вы можете либо объявить переменные перед функцией обратного вызова, либо установить расположение окна внутри функции обратного вызова (это то, что я бы рекомендовал).
window.location.href = "http://177.0.0.6:5001/?' + longitude + '' + lattitude + '";
Также примечательно, что вы создаете новый URL-адрес странным образом, без имен параметров поиска - вы получите что-то вроде «http://177.0.0.5:5001?23.398208973.89383». вы после, но я сомневаюсь в этом.
Самый простой способ заставить его работать — удалить строку, начинающуюся с «window.location.href», и заменить первые две строки, которые я упомянул, следующими:
const gotoURL = new URL(window.location.href);
gotoURL.searchParams.set('longitude', longitude);
gotoURL.searchParams.set('latitude', latitude);
window.location.href = gotoURL;
Это использует конструктор URL-адресов браузера, чтобы упростить создание URL-адресов.
Удачи, и я желаю вам всего наилучшего! ~ДжД
Вы используете двойную кавычку
"
для начала строки URL ("http://"
), но вы объединяете переменную с одинарной кавычкой'
. Это невозможно. Начинайте с двойной кавычки"
и заканчивайте двойной кавычкой."http://" + var
.