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

Question

[misterobot404]

Есть карта. Нужно реализовать возможность установки на ней меток. Т.е при нажатии на карте в этом месте рисуется фигура, например круг. У кого есть идеи? или что-нибудь почитать

Comments

[Алексей Уколов]

Что из себя представляет эта карта - картинка, google maps?
Что конкретно вызывает сложности - определение места клика, отрисовка метки?

[poniyur]

Если это yandex или google арты, то их API + javascript.
Если карта это просто тег img/svg/canvas, то просто javascript.
Мало пояснений в вопросе, никто тебе так не поможет.

[misterobot404]

Алексей Уколов, карта представляет собой картинку загруженную пользователем с возможностью приблилижения отдаления (ctrl+-) и установкой меток.
Искал готовые модули, но они привязаны к google map api, а там насколько я знаю нельзя свои картинки загружать, да и много лишнего функционала.
Проблему вызывает сама отрисовка метки, а координаты я так понимаю можно из pageX/pageY брать. При изменении размера картинки метки соответственны тоже должны сдвигаться.

[misterobot404]

poniyur, карта представляет собой картинку загруженную пользователем с возможностью приблилижения отдаления (ctrl+-) и установкой меток.
Искал готовые модули, но они привязаны к google map api, а там насколько я знаю нельзя свои картинки загружать, да и много лишнего функционала.
Проблему вызывает сама отрисовка метки, а координаты я так понимаю можно из pageX/pageY брать. При изменении размера картинки метки соответственны тоже должны сдвигаться.

Answer 1

[Алексей Уколов]

Проблему вызывает сама отрисовка метки, а координаты я так понимаю можно из pageX/pageY брать.

Да, координаты нужно брать из события клика.
Отрисовка метки не должна вызывать особых проблем - просто создаёте пустой абсолютно спозиционированный div с нужным классом, а отрисовать круг на css легко.

При изменении размера картинки метки соответственны тоже сдвигаться.

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

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

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

Comments

[misterobot404]

Алексей Уколов,

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

Да это мне и было нужно. Если я Вас правильно понял карта должна именть быть relative и метки внутри absolute с left и top заданными в процентах? Тогда при зуме они остануться на своих местах, а при изменениях размеров карты сдвинуться?

[Алексей Уколов]

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

[misterobot404]

Спасибо за пример! буду разбираться