1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Установка и настройка

jQuery Map Hilight

Главные вкладки

Аватар пользователя kasx kasx 7 июля 2011 в 15:08

Всем доброго дня!
Есть задача нарисовать интерактивную карту, на которой можно будет выбирать филиал организации. При выборе филиала должно появляться описание этого филиала. Поискал в инете и нашел такой замечательный плагин как jQuery Map Hilight. Но данный плагин не позволяет выводить информацию о филиале.
Подскажите, пожалуйста, как можно это реализовать.

Комментарии

Аватар пользователя fantom84 fantom84 7 июля 2011 в 16:29

на одном из сайтов реализовал вот такой функционал
Задача стояла такая, что необходимо было при клике на регион Италии выбирать соответствующий фильтр в представлениях.
Все это отображается в панелях. Одна панель - карта италии, вторая - фильтр, и третья - динамический контент.
делалось это так: создавалась карта изображения с помощью он-лайн редактора, который режет исходное изображение на полигоны с координатами
в итоге у меня появилось изображение состоящее из частей - imagemap
потом подключил модуль jquery map hilight. Теперь при выводе карты изображения и при проводе мышкой над областью подсвечивался нужный регион. Осталось только сделать так, чтоб при клике заполнялся необходимый фильтр и внизу менялось описание динамически генерируемое региона. Тут уже пришлось использовать самописный яваскрипт, изменяющий содержимое окна динамически

Для вывода изображения я использовал темплейт views-view-fields.tpl.php, так как мне удобнее было выводить изображение в нем.
Вот кусок, где выводилось изображение

<?php print $field->element_type; ?> class="field-content"><?php print $field->content; ?></<?php print $field->element_type; ?>>
                <?php drupal_add_js("sites/scripts/event.js")?>
                <map id="imgmap2010525131539" name="imgmap2010525131539">
                <area id="valle_id" shape="poly" alt="Валл Д'Аоста (Valle D'Aosta)" title="Валл Д'Аоста (Valle D'Aosta)" onclick="ahah_change_index(title)" coords="31,52,31,48,29,46,30,42,27,40,26,40,23,39,21,40,19,41,16,42,15,43,11,43,11,41,9,43,6,44,4,45,5,50,9,50,10,52,9,56,13,58,16,56,20,55,22,54,27,54,30,53"  href="javascript:void(0);" target="_self" />
<area id="poly_id" shape="poly" alt="Пьемонт (Piedmont)" title="Пьемонт (Piedmont)" onclick="ahah_change_index(title)" coords="29,41,29,47,31,48,30,53,27,55,22,54,21,53,19,55,16,56,15,56,13,58,14,60,12,62,12,64,11,66,7,67,6,68,4,67,1,69,2,72,4,74,4,76,7,79,10,78,10,81,11,83,8,83,8,87,6,88,6,91,8,92,7,94,10,99,14,100,16,102,19,102,25,100,26,103,27,103,29,103,31,103,32,100,34,101,34,96,37,93,38,90,41,90,42,92,43,89,47,90,48,91,49,89,52,89,52,88,55,85,57,84,59,87,61,87,61,80,59,79,59,79,58,77,57,77,56,74,54,72,49,72,46,67,46,66,45,63,45,61,47,60,50,64,50,61,54,60,51,56,49,52,49,50,45,47,47,40,49,39,50,35,47,34,44,29,45,27,44,22,42,23,41,24,40,27,38,28,36,29,35,30,37,32,36,34,34,36,33,38,31,38,30,41,30,41" href="javascript:void(0);" target="_self" />

Строкой <?php drupal_add_js("sites/scripts/event.js")?> я подключаю свой скрипт, который при клике модифицирует значение фильтра и динамический контент

Строка
<map id="imgmap2010525131539" name="imgmap2010525131539">
подключает карту изображения
Дальше идет описывание областей. вот одна из них
<area id="poly_id" shape="poly" alt="Пьемонт (Piedmont)" title="Пьемонт (Piedmont)" onclick="ahah_change_index(title)" coords="29,41,29,47,31,48,30,53,27,55,22,54,21,53,19,55,16,56,15,56,13,58,14,60,12,62,12,64,11,66,7,67,6,68,4,67,1,69,2,72,4,74,4,76,7,79,10,78,10,81,11,83,8,83,8,87,6,88,6,91,8,92,7,94,10,99,14,100,16,102,19,102,25,100,26,103,27,103,29,103,31,103,32,100,34,101,34,96,37,93,38,90,41,90,42,92,43,89,47,90,48,91,49,89,52,89,52,88,55,85,57,84,59,87,61,87,61,80,59,79,59,79,58,77,57,77,56,74,54,72,49,72,46,67,46,66,45,63,45,61,47,60,50,64,50,61,54,60,51,56,49,52,49,50,45,47,47,40,49,39,50,35,47,34,44,29,45,27,44,22,42,23,41,24,40,27,38,28,36,29,35,30,37,32,36,34,34,36,33,38,31,38,30,41,30,41" href="javascript:void(0);" target="_self" />
при клике на нее запускается onclick="ahah_change_index(title) - мой скрипт, который делает изменения на текущей странице.

Если интересно, то вот кусок скрипта

        function ahah_change_index(sel_title) {
                var oldHTM = document.getElementById('dynamic_descr').innerHTML;
                var newHTML="";
                //document.getElementById('dynamic_descr').innerHTML = "sdfsdf";
               
                switch (sel_title) {
                        case "Апулия (Puglia)":
                                document.forms["views-exposed-form-nedvizh-view-panel-pane-1"].tid.selectedIndex=6;
                                newHTML = "<b>Апулия</b> &mdash; самый восточный регион Италии: мыс Отранто в Саленто находится примерно в 80 км от берегов Албании - это самая восточная точка страны.<br /><br />Регион омывается Адриатическим и Ионическим морями и имеет самую длинную береговую линию среди континентальных регионов. Сухопутные границы региона проходят приблизительно по рекам Форторе и Брандано с притоками.<br /><br />Ладшафт &mdash; равнинный на 53,3%, на 45,3% холмистый и только 1,5% занимают горы, что делает регион наименее гористым в Италии. Самые высокие горы &mdash; Монти-Дауни, или, иначе, Субаппенино-Дауно&nbsp;(ит.), с вершинами Корнаккия ( Monte Cornacchia) &mdash; 1152 м и Кальве (Monte Calvo) высотой 1055 м..";
                                document.getElementById('dynamic_descr').innerHTML=newHTML;
                                break;
}
        }

ну и так case-ми обрабатываю все возможные клики

document.getElementById('dynamic_descr').innerHTML=newHTML;
вставляет динамическое содержимое в область панели нижнюю с названием dynamic_descr