Ссылка на яндекс карту с координатами

Ссылка на яндекс карту с координатами

При создании сайта, содержащего карту созданную с использованием API Яндекс.Карт, может возникнуть необходимость сформировать ссылку на карту с других страниц сайта (список филиалов организации, справочник организаций и т.д) .

Так чтобы показать конкретное место с масштабированием карты.

Как это сделать я расскажу в данной заметке на конкретном примере.

И так у нас имеется карта Нижнего Новгорода на которой обозначены платежные терминалы «Элекснет», с использованием файла в формате YmapsML.

Исходный код примера:

Терминалы Элекснет в Нижнем Новгороде — на карте

Может возникнуть ситуация, когда на сайте (каталог, интернет-магазин) возникает необходимость сделать множество ссылок, которые открывают карту с меткой. Но если делать на каждую ссылку по карте, то страница будет перегружена. Как же с этим бороться?

Для этого можно использовать фансибокс, api яндекс карт и небольшой скрипт.

Итак, у нас есть задача: нужна такая ссылка, которая будет показывать всплывающее окно с картой, в которой будет метка и описание объекта, при этом карта должна быть одна, а метка и описание – динамичным.
Считаем, что фансибокс уже подключен (последняя версия на момент создания статьи)
Для начала подключим API яндекс карт:

Мы загружаем ресскую версию в полной комплектации. Далее нужно создать шаблон для ссылки:

Что мы видим в этом коде? А видим, что по ссылке будет вызываться блок single-map, в котором есть место для заголовка окна фансибокса и блок для карты. Т.е. карта на странице будет всегда, вызываться в окошке фансибокса. Так же у ссылки есть параметры: координаты и текст для заголовка. Всяко проще задать такую ссылку с параметрами, чем каждый раз генерировать карту и вставлять ее в текст.

Читайте также:  Прогон по доскам объявлений

Далее следует инициализировать, пока скрытую, карту.

Таким образом карта есть, точка стоит где то, не важно где.
По клику нам необходимо переместить метку, это делается таким образом:

Таким нехитрым образом, если у нас есть каталог товаров можно либо сделать 1 поле текстовое, в которое будет вставляться ссылка по образцу, либо несколько полей и генерировать ее уже на месте – в зависимости от предполагаемой квалификации контент-менеджера и получить столько “карт” на странице – сколько нужно, при этом не нагружая страницу.

В предыдущем посте «Создание карты (map) для ссылок в Photoshop» я сделал заготовку для размещения на определенных ее участках ссылок на разные web-страницы («Как сделать картинку ссылок»)

Теперь если кликнуть на фигуры с надписями, то откроются соответствующие им странички: профиль, дневник или все посты из раздела «Уроки Photoshop» (внимание! после переноса блога на вордпресс и его переделки, ссылки не работают! но урок остается актуальным!)

Для того, чтобы картинка заработала, я написал примерно такой HTML-код:

Этот код можно вставить в поле сообщения (при нажатой кнопочке «Источник») или в эпиграф…

Кстати, есть и другие посты по теме: «Что такое HTML», «HTML-код рисунков», «Картинка-ссылка» и так далее.

Чтобы составить указанный код, немного вспомнил геометрию 🙂

Система координат: ось X — сверху вниз, ось Y — слева направо
Для задания координат фигуры нужно установить:
— квадрат (или прямоугольник), стороны которого параллельны осям — координаты двух противоположных углов — X1, Y1 и X2, Y2
— многоугольник — координаты ВСЕХ углов
— круг — координаты центра и радиус.

В моем случае, выходит, нужны координаты точек A,C — для ссылки «Профиль» (прямоугольник), точек D,E,F,G,H — для ссылки «Дневник» (многоугольник), Q и длина R — для ссылки «Уроки Photoshop» (круг). Все эти числа в HTML-коде вверху выделены красным цветом. Кроме того, нужно знать размер изображения в пикселах (зеленый цвет)

Читайте также:  Программа для сравнения дампов eeprom

Необходимости в особой точности нет, поэтому определить координаты можно выяснить с помощью «линейки» в Photoshop — для ее вызова нажимаю Ctrl + R

Мне было интереснее, чтобы кто-то другой посчитал координаты. Для этого запускаю MS Paint (Пуск — Все программы — Стандартные — Paint) и открываю в нем рисунок. При наведении курсора на искомые точки в нижней панели появляются их координаты, которые старательно записываю

Навигационные карты задаются тэгом

Тэг map включает себя тэги , которые определяют геометрические области карты-рисунка и связанные с ними ссылки.

Разобрался я так — для создания навигационной карты нужны:

теги с описанием изображения

В моем случае, значения оказались такими:

  • width=«640» height=«367» — размеры изображения
  • src="https://bravedefender.ru/f02c73a3cd94.jpg" — адрес изображения на сайте
  • usemap="#picture" — условное наименование изображения-карты (может быть любое)
  • map name=«picture» — имя карты (полностью соответствует указанному выше)

Значения для областей-ссылок — href — цель ссылки, shape — форма области и coords — координаты — соответствуют трем областям (area) на изображении.

Прямоугольник «Профиль»

  • href="https://bravedefender.ru/profile/" — адрес страницы профиля
  • shape="rect" — обозначение формы «прямоугольник»
  • coords="235,61,472,117" — координаты точек A (235,61) и С (472,117)

Многоугольник «Дневник»

  • href="https://bravedefender.ru/blog" — адрес страницы дневника
  • shape="poly" — обозначение формы «многоугольник»
  • coords="235,118,362,118,474,152,457,207,229,146" — координаты углов многоугольника: точки D (235,118), E (362,118), F (474,152), G (457,207) и H (229,146)

Круг «Уроки Photoshop»

  • href="https://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323" — адрес страницы постов из раздела «Уроки Photoshop»
  • shape="circle" — обозначение формы «круг»
  • coords="551,198,65" — координаты круга: центр — точка Q (551,198) и радиус — R=65

Подставил все полученные значения в «систему» HTML-кода для навигационной карты-изображения и получил следующее:

Именно этот код при использовании «превращается» в картинку с областями-ссылками.

Читайте также:  Что делает команда alter table

Для тренировки есть «облегченный» легкий вариант создания участков-ссылок — пост «Тренировка: области-ссылки на изображении»

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Ссылка на основную публикацию
Adblock detector