Вставка переменной html/javascript в URL-адрес window.location

Я пытаюсь получить долготу и широту в 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>



Вы используете двойную кавычку " для начала строки URL ("http://"), но вы объединяете переменную с одинарной кавычкой '. Это невозможно. Начинайте с двойной кавычки " и заканчивайте двойной кавычкой. "http://" + var.

vee 09.04.2022 16:51

window.location.href="177.0.0.6:5001"+долгота - так? у него нет выхода...

enving 09.04.2022 17:03

См. ответ @Энди.

vee 09.04.2022 17:04

На самом деле неясно, хотите ли вы сразу перейти на новую страницу (в этом случае обновление элементов DOM на текущей странице бесполезно) или хотите вернуть строку URI. getCurrentPosition — это асинхронный процесс, поэтому, если это последнее, вам нужно будет использовать обещание или асинхронное/ожидание, чтобы получить эту информацию обратно.

Andy 09.04.2022 17:15

Эй, Энди, это может быть первым. Немедленное перенаправление на новую страницу с помощью http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude} Я попробовал фрагмент вашего ответа ниже ... но он не работает ... Я думаю, отсутствует window.location?

enving 09.04.2022 17:36
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
5
47
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

  1. Вы путаете цитаты. Возможно, строка шаблона будет проще, убедившись, что вы присваиваете значения этих переменных параметру URL.

const uri = `http://177.0.0.6:5001/?lng=${longitude}&lat=${lattitude}`;
  1. Ой! У вас нет переменной с именем lattitude.

  2. Вы можете упростить себе задачу, переписав деструктурирование свойства объекта 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? Я обновлю свой код выше.

enving 09.04.2022 17:47

Какой результат вы ожидаете? Вы сказали в своем комментарии, что хотели немедленно перенаправить на новую страницу. Добавлять контент на текущую страницу бессмысленно, если вы его не увидите. Вы хотели записать данные в localStorage, чтобы новая страница могла получить к ним доступ или что-то в этом роде? @enving

Andy 09.04.2022 17:54
Ответ принят как подходящий

Здесь есть несколько неправильных вещей... но давайте попробуем разобраться с ними для вас...

  • Элементов не существует. Я предполагаю, что они уже существовали до того, как вы разместили это на 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-адресов.

Удачи, и я желаю вам всего наилучшего! ~ДжД

Другие вопросы по теме