2010-04-26 2 views
7

Мне нужно создать интерактивную карту мира на первой странице сайта, портал просмотра будет иметь размер 650x200 пикселей. Интерактивность будет включать в себя следующее: мышление над страной будет выделяться (страны будут буквально заполняться «красным», например) этой страной и отображать название страны (желательно текст в div), я также буду связывать событие выделения с выделенным цветом выделит страну.Интерактивная карта мира, выделите страны на mouseover

Мне сложно найти подходящее решение, я отказываюсь использовать или изучать проприетарные технологии, такие как вспышка, поэтому это не вариант. Я создал простой макет с использованием openlayers и пользовательского изображения карты, но маркеры стран загружаются слишком медленно в IE6.

Также кажется слишком SVG большим, как я пытался использовать RaphaelJS, но, когда отложен из-я понял, что данные карту мира 1.2MB которая полностью ООН приемлемая для первой страницы сайта ..

Я действительно в недоумении о том, как я собираюсь это сделать, в последнее время я должен вручную создать 250+ (хотя бы многие страны) pngs и применять события mouseover к горячим точкам на изображении ... но это, вероятно, будет тупик тоже .. отчаянно ищет решение, любые полезные комментарии будут оценены!

ответ

5

Я окончательно обосновался с RaphaelJS, импортируя все пути из svg inkscape, работает удивительно хорошо!

6

Зачем изобретать велосипед. Google Charts уже делает.

+0

вы уверены? я помню, чтобы взглянуть на него и не убеждаться, карты статичны, я не думаю, что могу присоединить JS-события? – BrenGG

+0

На странице, на которой я ссылался, показан пример полностью интерактивной карты мира. –

+0

hmmm. ok ja я помню, как это видел неделю назад, не могу вспомнить, почему я его бросил, плохо посмотрю утром ... еще раз спасибо – BrenGG

0

Есть ли у вас данные о координатах страны?

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

+0

У меня есть координаты всех столиц, я сделал небольшие маркеры в openlayers, но он слишком медленный в IE6 (20% посетителей сайтов) Я в идеале хочу придерживаться OpenLayers в качестве решения, поскольку я очень люблю он за последнюю неделю или две ... – BrenGG

+0

VML может работать для вас. Так как кажется, вас больше всего беспокоит IE6 – Shaunwithanau

0

Мы разработали Highmaps, что связано с Highcharts, чтобы легко решить проблемы с визуализацией данных. Мы также поставляем map collection из более чем 350 карт, оптимизированных для размера, чтобы держать вещи в легком весе.

Для примера детализации (загрузка более подробной карты по щелчку мыши) см. this demo.

Highmaps является бесплатным для некоммерческого использования.

Population history by country Drainage basin of the Meuse river