@misterobot404

Как рисовать метки в месте нажатия на карте?

Есть карта. Нужно реализовать возможность установки на ней меток. Т.е при нажатии на карте в этом месте рисуется фигура, например круг. У кого есть идеи? или что-нибудь почитать
  • Вопрос задан
  • 138 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Проблему вызывает сама отрисовка метки, а координаты я так понимаю можно из pageX/pageY брать.
Да, координаты нужно брать из события клика.
Отрисовка метки не должна вызывать особых проблем - просто создаёте пустой абсолютно спозиционированный div с нужным классом, а отрисовать круг на css легко.

При изменении размера картинки метки соответственны тоже сдвигаться.
Это придаёт задаче небольшую сложность. Но нужно всего лишь конвертировкать координаты метки при её создании в проценты от карты и позиционировать по ним - тогда зум будет работать как ожидается.

Упрощённый пример: jsfiddle.net/alexey_m_ukolov/Lnvfju2b/24

Конкретная реализация зависит от того какие браузеры вы хотите поддерживать и от прочих особенностей проекта, но идея такая.
В моём примере, впрочем, удалось отказаться от процентов в пользу пересчёта пикселей в зависимости от зума, а за корректное расположение отвечает уже сам браузер. Но я плохо помню, насколько хорошо в браузерах поддерживается zoom, поэтому не могу сказать насколько такая реализация надёжна.
Caniuse говорит, что не будет работать в Firefox, поэтому лучше переделать под transform: scale.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы