Как создать ссылку на сайте, которая на мобильных устройствах будет открывать Google Maps или Мобильные Яндекс Карты?
Как создать ссылку на сайте, которая на мобильных устройствах будет открывать Google Maps или Мобильные Яндекс Карты?
Для примера: все события в моем «гугл» календаре имеют гео-позицию, и кликая на нее открывается яндекс карты с вопросом о создании маршрута. Как реализовать такую же ссылку на сайте?
Единственное что удалось это скопировать ссылку на десктопной карте и при нажатие на нее на мобильном устройстве открывается Гугл карты.
- Вопрос задан более трёх лет назад
- 8811 просмотров
HTML — Урок 15. Навигационные карты — map
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки. Самым распространенным примером являются туристические карты мира, щелкаете по ее части с какой-либо страной и попадаете на страницу, посвященную этой стране.
Такие карты-изображения могут быть клиентскими и серверными. Ссылки клиентских карт хранятся в самом документе и по щелчку мыши браузер сам определяет, к какой области относятся координаты этой точки и осуществляет переход по нужной ссылке.
При серверном варианте эти координаты сначала передаются на сервер, там обрабатываются специальной программой и только после этого происходит переход по ссылке.Очевидно, что клиентские навигационные карты предпочтительнее. Их мы и рассмотрим.
Для примера представим, что мы являемся магазином бытовой техники и в шапке нашего сайта у нас расположена вот такая картинка:
Сделаем из нее навигационную карту, т.е. при щелчке по холодильнику будет осуществляться переход на страницу, посвященную холодильникам (с моделями, описанием и ценами), при щелчках по пылесосу и стиральной машине на соответствующие им страницы.
Для этого нам надо описать области на этой картинке, которые будут ссылками. Для описания таких областей используются теги с единственным параметром name, который задает имя карты-ссылок и используется потом для ссылки на эту карту.
Карты-изображения
Карты-изображения позволяют создавать ссылки произвольной формы для разных областей одного изображения. Вначале рассмотрим плюсы и минусы данной технологии.
Плюсы
- Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
- С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.
Минусы
- При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
- Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
- При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
- К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
- Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.
С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.
Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента . В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента . Значение атрибута name у должно соответствовать имени в usemap . При этом значение usemap в
начинается с символа решётки (пример 1).
Пример 1. Создание карты-изображения
Внутри контейнера располагается один или несколько элементов , они задают форму области, её координаты, устанавливают адрес документа, на который следует сделать ссылку, а также всплывающую подсказку.
Элемент имеет следующие атрибуты.
- shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
- alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href .
- title — выводит всплывающую подсказку при наведении курсора на область.
- href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента .
- coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
Для прямоугольника — координаты левого верхнего и правого нижнего угла.
Для полигона задаются координаты его вершин, как показано на рис. 1.
Рис. 1. Координатные точки для полигона
Как сделать ссылку на произвольный адрес на яндекс картах из email?
Как сделать ссылку на яндекс карту из email? Приходит заказ от клиента с адресом доставки и при клике на него хотелось бы попадать на яндекс карту. В документации есть только с помощью подключения geolink на html странице. Пока вижу только такое решение — только получение координат до отправки email и вставка в письмо. Но может быть есть решение чтобы просто в url передать адрес в текстовом виде?
Отслеживать
задан 24 дек 2018 в 12:52
1 1 1 серебряный знак 1 1 бронзовый знак
В Яндекс.Почте такой функционал уже реализован. В теле письма Вы пишете адрес словами, и получатель сможет нажать на этот текст как на гиперссылку, откроется карта. Вам не нужно ничего дополнительно настраивать.
27 дек 2018 в 14:55
Речь не о яндекс почте. В моем случае письма с сайта уходят не на яндекс, но даже если бы они уходили на яндекс, то читаться могут с помощью outlook, airmail, spark и т.д, а не через интерфейс яндекса. Поэтому нужно формировать ссылку.