Как создать универсальную HTML-ссылку на Яндекс.Карты?

Question

EmberEmpress

html , javascript , яндекс.карты

Как создать универсальную HTML-ссылку на Яндекс.Карты?

Как можно настроить одну ссылку, чтобы она корректно работала на устройствах с iOS и Android? Цель - сделать так, чтобы при наличии у пользователя приложения Яндекс — Вело открывался маршрут в Яндекс.Картах, а в противном случае — обычная ссылка на карты. 

Я предоставлю текущий код:

<pre><code class="html">&lt;a href="#stayhere" onclick="TryClick(event,this);"
    data-try-href="yandexmaps://maps.yandex.ru/?ll=ДОЛГОТА,ШИРОТА&amp;z=17"
    data-href="https://yandex.ru/maps/?pt=ДОЛГОТА,ШИРОТА&amp;z=18&amp;l=map"
&gt;ССЫЛКА &lt;/a&gt;

function TryClick(event,thiz){
  console.log("APP: TryClick")
  href = $(thiz).attr("data-try-href")
  reserve_href = $(thiz).attr("data-href")
  setTimeout(function() {
    console.log("DOING RESERVE")
    window.location = reserve_href;
  }, 200);
  window.location = href;
  event.preventDefault();
}</code></pre>

Однако некоторые модели iPhone не обрабатывают ссылку должным образом, что приводит к ошибке. На компьютерах, устройствах Android и некоторых iPhone всё работает корректно. Можете ли вы посоветовать, как улучшить код, чтобы добиться универсального функционирования ссылки?

17 декабря 2024 г. 16:33

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы создать универсальную HTML-ссылку на Яндекс.Карты, которая корректно обрабатывается на устройствах iOS и Android с установленным приложением, можно доработать ваш JavaScript код. Основная проблема, с которой вы столкнулись, заключается в том, что некоторые устройства могут не распознавать схему `yandexmaps://` должным образом, что может привести к ошибкам или некорректному открытию ссылки.

Вот улучшенный подход:

1. Проверяем, действительно ли приложение установлено, и используем таймер для переключения на веб-версию в случае, если приложение не ответит.

2. Используем функцию, чтобы убедиться, что мы правильно обрабатываем ссылки. 

Вот пример кода, который включает эти улучшения:

```html
<a href="#stayhere" onclick="TryClick(event, this);"
    data-try-href="yandexmaps://maps.yandex.ru/?ll=ДОЛГОТА,ШИРОТА&amp;z=17"
    data-href="https://yandex.ru/maps/?pt=ДОЛГОТА,ШИРОТА&amp;z=18&amp;l=map">
    ССЫЛКА
</a>

<script>
function TryClick(event, thiz) {
    event.preventDefault(); // Предотвращаем переход по ссылке

    let href = $(thiz).attr("data-try-href");
    let reserve_href = $(thiz).attr("data-href");
    let timer; 

    // Попробуем открыть ссылку на приложение
    window.location = href;

    // Установим таймер, чтобы проверить, был ли открыт маршрут в приложении
    timer = setTimeout(function() {
        // Если за 1000 мс (или другую разумную величину) приложение не ответило, открываем резервную ссылку
        window.location = reserve_href;
    }, 1000); // Таймаут, который можно настроить в зависимости от ваших нужд

    // Небольшое улучшение, чтобы очистить таймер, если всё прошло успешно
    window.addEventListener('pagehide', function() {
        clearTimeout(timer);
    });
}
</script>
```

### Объяснение:

1. **Предотвращение перехода по ссылке по умолчанию**: `event.preventDefault()` гарантирует, что переход по ссылке не происходит сразу.

2. **Таймер и `setTimeout`**: Мы устанавливаем таймер на 1000 мс (можно настроить) для перехода к резервному адресу. Если приложение Яндекс.Карты успешно открывается, то переход к резервному адресу не произойдет.

3. **Событие `pagehide`**: Этот обработчик позволяет нам очистить таймер, если сначала открывается приложение, а не требуется переход к веб-версии.

С этим кодом ссылка должна работать более универсально, обеспечивая корректное открытие как на iOS, так и на Android устройствах.