@strify_25

Как сделать интерактивную схему здания?

Имеется схема торгового центра в формате svg. Все нарисованные торговые точки - отдельные элементы. Необходимо при клике на какой-либо элемент показывать информацию о магазине. При этом один магазин может занимать несколько точек, все они должны подсвечиваться. В схеме есть не только элементы с атрибутами x и у, но и path, у которых эти атрибуты отсутствуют.
imUo3FUIQn0.jpg
Я сделал сейчас так: схема вставлена кодом, всплывающее окно находится за пределами тега svg. Но чтобы его спозиционировать, я беру координаты x и у, и с ними работаю. это подходит для одного "прямоугольника". Чтобы объединить несколько, попробовал обернуть их в тег a. но когда я пытаюсь получить координаты ссылки console.log($(this).position().top); , получаю неправильное значение. Тег-обертка всей схемы имеет position:fixed, так что, судя по документации метода position() координата должна браться от его начала, но этого почему-то не происходит, получаю 533, хотя от верхней границы там явно меньше 300. Как еще можно сделать такое всплывающее окно?
  • Вопрос задан
  • 574 просмотра
Пригласить эксперта
Ответы на вопрос 2
sergski
@sergski
web-developer
Задайте всем точкам id по шаблону, например, первая цифра -- уникальность магазина, вторая -- порядковый номер точки у этого магазина. Те если у магазина 3 точки, то соответственно id="shop11", id="shop12", id="shop13". А дальше по клику получаете содержимое id, находите соответствующее этому магазину окно с инфой (shop1) и выводите его.
Ответ написан
Комментировать
А можно воспользоваться сервисом по созданию интерактивной навигации. Там ещё и маршруты прокладываться будут и админка по управлению контентом готова и SDK для встраивания в любой сайт есть.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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