Как создать анимированную карту мира, например, когда вы наводите на нее курсор, континент выделяется и появляется всплывающее окно с выбранными странами

Question

Я пытаюсь найти или создать карту мира, например, при наведении курсора на выбранный континент и появлении всплывающего окна с выбранными странами, например на следующем веб-сайте или аналогичном: http://ilfc.com/customers.htm Знаете ли вы какой-либо источник для загрузки Ajax, jQuery или карты с флэш-кодом, и если для создания какой технологии лучше всего использовать?

Answer 1

Я делал что-то подобное раньше и использовал следующую технику.

Сначала вам нужно несколько изображений. Карта мира и графика для каждой выделенной страны в том же разрешении, что и карта мира. Выделенная страна должна находиться на той же позиции, что и на карте мира! Последнее изображение пустое.

Теперь создайте карту изображения, которая содержит форму стран.

Следующий шаг, создайте три «слоя», которые будут лежать друг на друге. Слой на заднем плане будет отображать карту мира. Второй будет отображать выделенную страну. В верхней части используйте пустое изображение и карту изображения. Предполагая, что каждая область в изображении имеет имя страны в качестве идентификатора, вы можете использовать следующий скрипт на основе jquery:

$(document).ready(function () {
    $('#idoftheimagemap area').each(function () {
        $(this).hover(
            function () {
                //assuming it is an image
                $('#idofthehighlightlayer').attr('src', 'images/' + $(this).attr('id') + '.png');
            },
            function () {
                $('#idofthehighlightlayer').attr('src', 'images/blank.png');
            }
        );
    });
});

Для всплывающего окна вы можете использовать qtip .

Answer 2

Существует множество пакетов веб-картографирования Javascript, которые работают в разных браузерах и позволяют вам делать подобные вещи.Попробуйте OpenLayers - все, что вам нужно сделать, это указать границы региона в виде GML или другого поддерживаемого формата, а затем написать свое выделение и обработчики щелчков.

www.openlayers.org