Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Карта с маркерами и событие клик (https://javascript.ru/forum/jquery/35451-karta-s-markerami-i-sobytie-klik.html)

modestes 11.02.2013 12:20

Карта с маркерами и событие клик
 
Приветствую

Есть карта http://modestes.ru/test
При клике на область карты она выделяется и снизу появляется контактная информация которая относится к этой территории.
На карте есть маркеры, которые изначально все показаны, задача в том чтобы помимо клика на область карты, можно было еще кликнуть и на маркер, а далее точно так же с областью, показывается блок с контактной инфой внизу.
Т.е. коротко говоря, нужно тоже самое что и по клику на область, только еще и для маркеров.

Проблема в том что не могу разобраться в чужом коде, (с jquery плохо знаком)
Помогите разобраться, и привязать контактную инфу по клику на маркеры


Вот весь скрипт отвечающий за карту

var arCounties = false;

$(function(){
$(".contacts_list > li.col_left").hide();
	// Contacts map
	if ( $(".contacts_map").length > 0 ) {
	
		$("#layer2")
//			.bind("mouseout", function(){ $(this).attr("class",""); })
			.each(function(){

				var layer1 = $("#layer1");
				var	layer2 = $(this);
				
				mapObj = $(this).attr("usemap");
				
				if (mapObj.indexOf("#") != 0)
					mapObj = mapObj.substr(mapObj.indexOf("#"))
				

				$("area", mapObj) //Это сам объект, территория на карте
					.hover(
						function(){
							layer1.addClass($(this).attr("href").substring(1));
						},
						function(){
							layer1.removeClass($(this).attr("href").substring(1));
						}
					)
					.click(function(){
						var strHref = $(this).attr("href").substring(1);

						layer2
							.removeClass()
							.addClass("contacts_map " + strHref+"_active");

                                                //Показа и скрытие маркеров
						$(".b_map_ie > i", ".map").hide();
						$(".m_" + $(this).data('class').toLowerCase()).show();

						//alert($(this).data("class"));
						
/*Тут как я понял по событию клик на определенной территории, выполняется этой участок, который выводит контактную инфу.*/
						var regionSTR = $(this).data("class");
						
                                                 
						$("li", ".contacts_list")
							.filter(".cb").remove().end()
							.hide()
							.filter("[rel='"+regionSTR+"']")
							.show()
							.removeClass("col_left, col_right")
							.filter(":visible")
							.each(function(i){
								$(this).addClass(i%2==0?"col_left":"col_right")
	
								if (i%2==1 && i>0)
									$(this).after('<li class="cb"></li>');
						});
						
						
						return false;
					})
			})
	}

/* 
Это уже я добавил для теста, клик по маркеру срабатывает, но как привязать появление контактной информации для соответствующей территории, не пойму

						$(".b_map_ie > i", ".map").click(function(){
						  alert('Вы нажали на элемент "foo"');
						});
*/

});

tsigel 11.02.2013 13:34

Дайте меткам те-же классы что и area и один общий класс, тогда:

$('.label').click(function() {
  var class = $(this).attr('class').replace('label ');
  $('area.'+class).click()
})


Где label - общий класс меток и этот класс стоит перед классом общим с классом area.

ks123 25.10.2017 15:51

нашла такую карту https://www.plerdy.com/ru/ интересно как она работает
может кто-то пробовал?


Часовой пояс GMT +3, время: 11:09.