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

Ваш аккаунт

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

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

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

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

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

Интерактивная карта мира на JavaScript

Интерактивная карта мира на JavaScript

Автор: mike
Дата: 28 апреля 2011 года

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

Конструктор:

Код:
var map=new WorldMap(options);

где options – объект со списком параметров. Для работы необходимо как минимум три основных параметра:

  • element- идентификатор HTML элемента внутрь которого будет вставлена карта;
  • width- ширина карты в пикселях;
  • height- высота карты в пикселях.

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

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="worldmap.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">

var map=new WorldMap({
    element : 'worldmap',
    width : 640,
    height : 400,
    });

</script>

</body>
</html>

Параметры:

element

Идентификатор HTML элемента внутрь которого будет вставлена карта. Обязательный параметр.

width

Ширина карты в пикселях. Обязательный параметр.

height

Высота карты в пикселях. Обязательный параметр.

top

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

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

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="worldmap.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">

var map=new WorldMap({
    element : 'worldmap',
    width : 640,
    height : 400,

    top: 50,
    left: 100,
    right: 90,
    bottom: 140
    });

</script>

</body>
</html>

left

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

right

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

bottom

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

clickhandler

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

Пример:

Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="worldmap.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);
    }

var map=new WorldMap({
    element : 'worldmap',
    width : 640,
    height : 400,
    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="worldmap.js"></script>
<style type="text/css">
.worldmap {fill:white;stroke:black;stroke-width:0.5px;}
.worldmap:hover {fill:#e0e0e0;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">

var map=new WorldMap({
    element : 'worldmap',
    width : 640,
    height : 400,

    c : {BY:2,DE:2,RU:1,CA:1}
    });

</script>

</body>
</html>

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

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

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

Комментарии

1.
96K
21 августа 2015 года
Сергей Сараев
0 / / 21.08.2015
Мне нравитсяМне не нравится
21 августа 2015, 14:13:40
Спасибо. Очень помогло ваше решение!
2.
51K
29 июня 2013 года
BagiLR
110 / / 29.06.2013
Мне нравитсяМне не нравится
11 июля 2013, 23:09:53
Спасибо автору разработчику!!! :) ;) очень впечатляюще!!! :) ;)
работа прекрасная и коллосальная!!!
3.
83K
06 мая 2012 года
ahtubansk
0 / / 06.05.2012
Мне нравитсяМне не нравится
6 мая 2012, 15:16:35
Спасибо. Очень помогло. Я в JS не силен, но есть необходимость создания интерактивной карты мира.
Подскажите как в данный код можно добавить возможность всплывающих подсказок при наведении на страну с произвольным текстом и как сделать, что при нажатии на страну мы переходили на новую страницу с описанием.
Спасибо.
4.
73K
02 июля 2011 года
XanderBass
0 / / 02.07.2011
Мне нравитсяМне не нравится
2 июля 2011, 19:20:12
Жаль старые браузеры не распознают SVG. А то было бы универсальное решение для навигации по странам. Если доработать при помощи, скажем, jQuery, мощнейшее средство получится.
4.1.
4
01 октября 2002 года
mike
3.7K / / 01.10.2002
Мне нравитсяМне не нравится
21 ноября 2011, 15:05:28
http://www.codenet.ru/webmast/js/world-map-jquery-rus/
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог