Создание интерактивной карты

Мне было поручено создать интерактивную карту всех штатов США, и мне просто интересно, как лучше всего это сделать?

Я знаю, что мог бы довольно легко построить это во Flash, но одно из требований состоит в том, чтобы оно работало на iPhone, так что очевидно, что это не распространяется на Flash!

Требования:

  1. Должен работать во всех браузерах и на портативных устройствах.
  2. Должен быть обновляемым через Wordpress.
  3. Должен включать небольшое информационное окно, которое появляется при наведении курсора на каждое состояние.
  4. Внешний вид карты будет разработан нами (мы хотели бы иметь полный контроль над этим, так как мы графические дизайнеры!), Так что это также исключает использование пользовательской карты Google.

Я выполнил поиск здесь и нашел два примера, первый — именно то, что нам нужно, но делается во флеш-памяти — пример

Было предложено использовать это, но я не думаю, что смогу создавать всплывающие окна при наведении над каждым штатом.

Кто-нибудь знает какие-нибудь альтернативы?

ОБНОВИТЬ:

Пример, который мне нравится, - раздел функций Transmit. Как это было построено и как я мог воссоздать что-то подобное?


wordpress interactive map flash
person Rob    schedule 23.05.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать старый добрый тег <map> и добавить javascript для отображения всплывающего окна.

(Я думаю, что можно даже использовать только CSS. Вы создаете все всплывающие окна, но не отображаете их. В части :hover каждого «штата США» вы делаете соответствующее всплывающее окно.)

Но есть проблема с вашим запросом: совместить совместимость КПК и зависание невозможно!

Это может быть слишком много для того, что вы хотите сделать, но при работе с картами (если вас не устраивает ненастраиваемая карта Google/Yahoo/Microsoft) я бы рекомендовал OpenLayers. OpenStreetMap использует его, как и другие известные веб-сайты.

Не беспокойтесь о части WordPress. Конечно, вы бы сэкономили время, если бы существовал существующий плагин, но я думаю, что это наименее важная вещь, которую следует учитывать. Я написал несколько самодельных плагинов для WordPress. Это очень просто (по сравнению, например, с TYPO3!)

person tiktak    schedule 23.05.2011
comment
+1 для OpenLayers. Действительно. Он делает то, что вы хотите, он бесплатный, и вы можете использовать множество фоновых данных. Недавно прошел фестиваль кодирования для поддержки мобильных устройств. OpenLayers, каждый раз, для веб-карт. - person Spacedman; 23.05.2011
comment
Просто для простоты использования есть ли что-нибудь, что можно сделать аналогично области функций на - panic.com/transmit ? По сути, эти точки будут лежать поверх изображения карты. Точки никогда не будут двигаться и/или их нужно будет редактировать, но всплывающая информация будет меняться со временем. - person Rob; 24.05.2011

arrow_upward
1
arrow_downward

Я знаю, что этой ветке уже несколько месяцев, но на случай, если люди все еще ищут. Я создал плагин для WordPress, который может делать то, что вам нужно. Посмотрите пример того, что вы можете с ним сделать:

http://cmoreira.net/interactive-world-maps-demo/usa-custom-election-map/

Он не соответствует всем вашим требованиям, но также может быть хорошим вариантом.

person CMoreira    schedule 11.10.2012