/ Адаптивность / Кнопки построить маршрут

Кнопки построить маршрут

HIT

Создадим для мобильных устройств кнопки с переходом в навигаторы с построением маршрута к нашему объекту.

Верстка

<div class="mobile-travel-track">

<h2>Проложить маршрут:</h2>

<div class="tarcks">
<a href="yandexmaps://build_route_on_map?lat_to=43.123456&amp;lon_to=39.123456">
<img src="/wp-content/uploads/2020/10/yandex_maps_150.png">
Яндекс Карты
</a>

<a href="yandexnavi://build_route_on_map?lat_to=43.123456&amp;lon_to=39.123456">
<img src="/wp-content/uploads/2020/10/YandexNavigator_150.png">
Яндекс Навигатор
</a>

<a class="chrome-link" href="google.navigation:q=43.123456,39.123456&amp;mode=d">
<img src="/wp-content/uploads/2020/10/Maps_Logo_150.png">
Google Maps
</a>

</div>

</div>

В ссылках указываем координаты текущего объекта.

Стили

.mobile-travel-track {display: none;}
.tarcks {display: flex; justify-content: center;}
.tarcks > * {width: 33.33%; text-align: center;}
.tarcks img {max-width: 50px; display: block; margin: 0 auto;}
body.ios .chrome-link {display: none;}

@media screen and (max-device-width: 800px) { 
.mobile-travel-track {display: block};
}

В системе iOS как всегда есть нюансы. Эта система не очень хорошо работает с Google Maps, используя по умолчанию свое приложение с картами и ссылка на Google Maps работать в iOS не будет. Поэтому мы должны отключить этот вариант для iOS.

Чтобы выявить устройство с iOS используем функцию:

// Определение устройства с iOS

add_filter('body_class', 'ios_class');
function ios_class($classes) {
    if (!empty($_SERVER['HTTP_USER_AGENT'])) {
        if (preg_match('/iPad|iPod|iPhone/i', $_SERVER['HTTP_USER_AGENT'])) {
            $classes[] = 'ios';
        }
    }
    return $classes;
}

Есть еще один момент уже связанный с приложением Яндекс Навигатор, в сутки можно перейти по этой ссылке не более нескольких раз. Далее срабатывает ограничение и переход не происходит. Но данный момент не является критичным, т.к. вряд ли пользователь будет много раз в день переходить по данной ссылке.

[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Notice: Функция WP_Styles::add вызвана неправильно. Стиль с дескриптором "editor-buttons" был поставлен в очередь с незарегистрированными зависимостями: dashicons. Дополнительную информацию можно найти на странице «Отладка в WordPress». (Это сообщение было добавлено в версии 6.9.1.) in /home/t/tiberi6w/opttour.ru/public_html/wp-includes/functions.php on line 6170

Пока нет комментариев. Будь первым!

Кнопки построить маршрут Кнопки построить маршрут
Сортировка постов (по дате, по заголовку, по дате изменений)
Рекомендации для васСортировка постов (по дате, по заголовку, по дате изменений)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.