Задать вопрос
@PHPjedi
веб-разработка

Как грамотно реализовать интерактивную карту?

Привет!

Как реализовать ГРАМОТНО интерактивную карту?

Ну, для примера интерактивную карту торгового центра.

  • Как разместить img на весь размер блока?
  • Svg размещать над img или после?


Я хотел бы посмотреть грамотно составленные примеры.
И прочитать какую нибудь инструкцию\документацию.

Если вы знаете ссылки или какой нибудь другой ресурс, в котором есть все необходимая информация по интерактивным картам, то пожалуйста, отставьте их в ответах.

Хотелось бы узнать, какие есть новые методы реализации в 2018 году.

Заранее большое спасибо!
  • Вопрос задан
  • 269 просмотров
3 комментария
Подписаться 3 Простой 3 комментария
Решения вопроса 2
0example
@0example
Для того, чтобы вы могли выбирать какие-то блоки на вашей карте торгового центра, нужно:

1. Карта в svg формате, причем при ее рисовании, каждый отдельный выделяемый блок должен быть отдельным слоем, для того чтобы в коде он помечался каким-то ID и был обособленным элементом.
2. Когда вы вставите вашу SVG карту (а ее обязательно надо вставлять голым кодом, а не картинкой), у вас появится возможность обращаться к вашим элементам в svg как к обычному DOM, на эти блоки вы можете повесить обработчики, задавать им выделение, делать вообще все что угодно. Самое главное чтобы в самом SVG были все эти блоки со своими ID, какими-то данными, чтобы с помощью JS можно было спокойно к ним крепиться и обрабатывать.
Ответ написан
1 комментарий
1 комментарий
Stalker_RED
@Stalker_RED
какие есть новые методы реализации в 2018 году
Ну можете на WebGL это все написать, а потом подождать пока оно начнет работать в старых браузерах.

Демка на SVG: https://jsfiddle.net/Stalk/jarsv6o4/

Документация:
https://developer.mozilla.org/ru/docs/Web/SVG
https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial

Для работы с SVG есть куча библиотек и инструментов разной крутизны и сложности.
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Веб-разработчик
Искра • Екатеринбург
от 80 000 до 100 000 ₽
Веб-разработчик
Art gorka • Санкт-Петербург
от 60 000 ₽
Веб-дизайнер
Stakewolle
от 40 000 до 60 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы