Предложения по реализации картоподобного навигационного интерфейса? - PullRequest
1 голос
/ 24 марта 2011

Hello Я пытаюсь реализовать Google Map на основе HTML5, такой как навигационный интерфейс для помещений внутри здания. Я имею в виду базу данных SQL, содержащую информацию о расположении комнаты (например, координаты пикселей) в статическом 2D-изображении компоновки здания.

Как лучше всего отображать навигационные линии и реагировать на события касания / нажатия. Я хочу, чтобы пользователь коснулся комнаты на 2D-карте и нарисовал цветной маршрут навигации поверх изображения 3D-карты, чтобы показать пользователю, как туда добраться.

Будет ли CANVAS или SVG подходящим решением? Как насчет использования только CSS3? Flash не разрешен, так как мне нужно для этой работы в браузере на iPad.

Джо

Ответы [ 2 ]

2 голосов
/ 24 марта 2011

SVG создает узлы, доступные через DOM, а canvas - нет. поскольку canvas не создает DOM-узлы, в большинстве браузеров он рендерится быстрее, чем SVG. Если вы извлекаете информацию из базы данных на основе действий пользователя, может быть проще управлять событиями и манипулировать картой с помощью SVG. Тем не менее, вы также можете обрабатывать пользовательские события на холсте, просто отслеживая положение мыши относительно холста. Это будет означать сопоставление координат для комнат и т. Д. С координатами (x, y) на холсте, что может быть неприятно, если ваши требования по какой-либо причине изменятся.

Я просто размышляю, но можно разместить каждую комнату в виде отдельного изображения на холсте - по сути, составив комнаты вместе, составив карту здания. Где изображение должно быть размещено и путь к файлу изображения для каждой комнаты может быть сохранен в БД в качестве атрибутов комнаты, что добавляет некоторую гибкость для непредвиденных непредвиденных ситуаций в будущем. Затем вы можете легко нарисовать ваши маршруты с контекстным перемещением и переносом поверх комбинированных изображений.

0 голосов
/ 24 марта 2011

Если вы ищете что-то похожее на Google Maps, посмотрите polymaps , который предоставляет весь код javascript для чтения / разветвления.

Просто рисовать линии поверх изображения можно с помощью canvas или svg. Решение только для CSS звучит как дополнительная работа для меня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...