Каким образом можно сделать адаптивную интерактивную карту с точками?

например, имеется карта - изображение (width: 100%; height: auto), поверх нее установлены точки, через position absolute, как правильно реализовать подобное, чтобы при уменьшении экрана, точки оставались на привязанных местах относительно самого изображения.
628d5c79c7e51701220441.jpeg
при уменьшении экрана:
628d5c7f3c990824848400.jpeg
  • Вопрос задан
  • 190 просмотров
Пригласить эксперта
Ответы на вопрос 3
godsplane
@godsplane
Скачать карту с mapsvg.com (Не помню есть ли там разбивка по странам) и уже привязываться к стране/региону , там уже все проставлено
Ответ написан
Комментировать
@ostup17
Начинающий программист (flutter dev - frontend de)
Попросить дизайнера/того кто делал макет, вынести карту в изображение. Мне кажется не плохой вариант.
Либо искать какой-то сервис, который предоставляет API с картами, таких много, но мне кажется, будет трудно найти именную синюю карту и именно с такими поинтами
Ответ написан
Комментировать
@mesaga1983
I like CSS
Карту делать отдельной картинкой. На ней располагать точки с помощью абсолютного позиционирования с координатами в процентах. Только при уменьшении экрана иконки точек тоже должны уменьшатся пропорционально уменьшению карты, иначе они повылезают за рисунок карты.
Ответ написан
Ваш ответ на вопрос

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

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