@PHPjedi

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

Привет!

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

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

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


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

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

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

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

1. Карта в svg формате, причем при ее рисовании, каждый отдельный выделяемый блок должен быть отдельным слоем, для того чтобы в коде он помечался каким-то ID и был обособленным элементом.
2. Когда вы вставите вашу SVG карту (а ее обязательно надо вставлять голым кодом, а не картинкой), у вас появится возможность обращаться к вашим элементам в svg как к обычному DOM, на эти блоки вы можете повесить обработчики, задавать им выделение, делать вообще все что угодно. Самое главное чтобы в самом SVG были все эти блоки со своими ID, какими-то данными, чтобы с помощью JS можно было спокойно к ним крепиться и обрабатывать.
Ответ написан
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 есть куча библиотек и инструментов разной крутизны и сложности.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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