Недавно меня попросили реализовать редактор координат ресурсов MODX.
Задача
Есть сайт с объявлениями о продаже недвижимости, где каждый дом имеет свой адрес (город, улица, номер дома и так далее). И для посетителей удобнее не просто видеть текстовый адрес, а сразу видеть карту с меткой. Естественно, карта должна предоставляться каким-нибудь качественным картографическим сервисом; я решил использовать Яндекс.Карты.
На рисунке ниже изображена карта от Яндекса. Координаты балуна (метки) соответствуют тем, что введены в текстовом поле под картой. При перемещении метки на карте меняются координаты в текстовом поле, а при изменении координат в текстовом поле происходит перемещение метки. Короче, координаты в текстовом поле и на карте синхронизированы.
При клике на метку должна показываться подсказка. Логично было бы разместить в ней заголовок объявления.
Представим, что эту задачу поставили человеку, не знакомому с программированием. Самое простое решение — вручную вводить координаты метки. Тогда тому, кто этим занимается, пришлось бы сначала искать этот адрес на стороннем сайте, копировать оттуда координаты и вручную добавлять в объявление.
Такой способ очень прост в реализации, так как достаточно создать один TV для ввода координат и встроить карту на станицу объявления. Но эта статья посвящена тому, как сделать редактирование координат удобным.
1 Переменная шаблона (TV)
Сначала нужно создать TV, который будет содержать ширину и долготу, разделённые запятой. Я назвал эту переменную coords
. Нужно лишь указать, для каких шаблонов доступна эта переменная.
2 Создание плагина
Единственное, что нужно сделать в плагине — это отловить событие отрисовки админки. Я пока решил повесить плагин на следующие события: OnBeforeManagerPageInit, OnManagerPageAfterRender, OnManagerPageBeforeRender, OnManagerPageInit.
Единственное, что происходит внутри плагина — это подключение нескольких JavaScript-файлов: скрипт Яндекс.Карт, jQuery и самописный скрипт для управления картой.
<?php
$modx->regClientStartupScript('http://api-maps.yandex.ru/1.1/index.xml');
$modx->regClientStartupScript($modx->getOption('site_url').'assets/js/jquery-2.1.3.min.js');
$modx->regClientStartupScript($modx->getOption('site_url').'assets/js/yandox-map-tv.js');
3 Интеграция карты
Логика JavaScript-файла следующая:
- Находим поле ввода координат, берём оттуда значение координат
- Вставляем рядом с полем блок с контейнером карты
- Инициализируем карту
- Размещаем на карте балун с указанными в TV координатами
К сожалению, нельзя обратиться к DOM-элементу TV-поля, зная имя TV (по крайней мере, я не понял, как это сделать). Поэтому приходится обращаться к полю, используя селектор #tv6
, где 6 — это id переменной шаблона.
Вместо вывода
Этот плагин можно использовать и для других целей, например, для редактирования карты на странице с контактной информацией.