Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11888
Последний выпуск: 19.06.2015

Интерактивная карта мира - jQuery плагин

Интерактивная карта мира - jQuery плагин

Автор: mike
Дата: 19 ноября 2011 года

Небольшой jQuery плагин для отображения интерактивный карты мира. Карта построена на использовании SVG и работет в браузерах MSIE 9+, Firefox 3+, Chrome 3+, Safari 3+, Opera 9+.

Пример простого подключения:

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>

<style type="text/css">

.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>

</head>
<body>

<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>

<script type="text/javascript">
$(document).ready(function(){
     $('#worldmap').SVGWorldMap();
     });
});
</script>
</body>
</html>

Список возможных настроек:

width

Ширина карты в пикселях. Если параметр не задан, используется ширина контейнера.

height

Высота карты в пикселях. Если параметр не задан, используется высота контейнера.

top

Смещение от верхнего края в условных единицах. Используется для частичного отображения только карты, например Европа, Азия, Америка. 100 – отступ 50%, 50 – отступ 25%. 200 – отступ 75% карты и т.п.

left

Смещение от левого края в условных единицах.

right

Смещение от правого края в условных единицах.

bottom

Смещение от нижнего края в условных единицах.

Пример. Карта Европы:

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>
</head>
<body>

<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>

<script type="text/javascript">
$(document).ready(function(){
    $('#worldmap').SVGWorldMap({
        top: 50,
        left: 100,
        right: 90,
        bottom: 140
        });
 });
</script>
</body>
</html>

clickhandler

Обработчик кликов по странам. В качестве параметра обработчику передается ISO код страны.

Пример:

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>

<style type="text/css">

.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}
</style>

</head>
<body>

<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>

<script type="text/javascript">

function countryclick(tld) {
    alert(tld);
    }

$(document).ready(function(){
    $('#worldmap').SVGWorldMap({
        clickhandler :'countryclick'
        });
    });
});
</script>
</body>
</html>

overhandler

Обработчик наведения курсора мыши на страну (onmouseover). В качестве параметра обработчику передается ISO код страны.

outhandler

Обработчик отведения курсора мыши с страны (onmouseout). В качестве параметра обработчику передается ISO код страны.

c

Объект содержащий список стран, которые нужно выделить на карте. Объект содержит постфикс стиля.

Пример:

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript" src="jquery.svgworldmap-2.1.src.js"></script>

<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0ffe0;stroke:black;stroke-width:0.5px;}

.worldmap_1 {fill:#f08080;stroke:black;stroke-width:0.5px;}
.worldmap_1:hover {fill:#ff0000;stroke:black;stroke-width:1px;}

.worldmap_2 {fill:#8080f0;stroke:black;stroke-width:0.5px;}
.worldmap_2:hover {fill:#0000ff;stroke:black;stroke-width:1px;}
</style>

</head>
<body>

<div id="worldmap" width="640" height="400" style="overflow:hidden;"></div>

<script type="text/javascript">

function countryclick(tld) {alert(tld);}

$(document).ready(function(){
    $('#worldmap').SVGWorldMap({
            bottom : 20,
            clickhandler : 'countryclick',
        c : {BY:2,DE:2,RU:1,CA:1}
        });
    });
});
</script>
</body>
</html>

В примере к странам BY и DE применяется стиль worldmap_2, а к странам RU и CA стиль worldmap_1. Результат работы выглядит следующим образом:

Оставить комментарий

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
83K
06 мая 2012 года
ahtubansk
0 / / 06.05.2012
Мне нравитсяМне не нравится
6 мая 2012, 14:02:13
Спасибо. Очень помогло. Я в JS не силен, но есть необходимость создания интерактивной карты мира.
Подскажите как в данный код можно добавить возможность всплывающих подсказок при наведении на страну с произвольным текстом и как сделать, что при нажатии на страну мы переходили на новую страницу с описанием.
Спасибо.
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог