Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

infoWindow 마우스 이벤트

#1

다중 마커생성후 그 마커들에 대하여 팝업을 마커 클릭시에만 뛰울려 합니다.
하지만 반복문때문에 그런지 마지막 마커에 대한것만이 이벤트가 적용이 되더군요.
v1에는 설명이 있는데 아직 v2버전에는 없더군요. 방법이 따로 있나요?
밑에 코딩 첨부합니다.

for (var i = 0; i< positions.length; i++){//for문을 통하여 배열 안에 있는 값을 마커 생성
var lonlat = positions[i].lonlat;
var title = positions[i].title;
var content = positions[i].title;
//Marker 객체 생성.
var marker = new Tmapv2.Marker({
position : lonlat, //Marker의 중심좌표 설정.
map : map, //Marker가 표시될 Map 설정.
title : title, //Marker 타이틀.

		});
		
		
		infoWindow = new Tmapv2.InfoWindow({
			position:lonlat, //Popup 이 표출될 맵 좌표
			content: content, //Popup 표시될 text
			type: 2, //Popup의 type 설정.
			map: map 
			
		});
		infoWindow.setVisible(false);
		
		marker.addListener("click", function(evt) {
			infoWindow.setVisible(true);
		});
0 Likes

#2

안녕하세요.
Tmap API 운영담당자입니다.

infoWindow생성시 전달될 좌표값을 따로, 지정하여
마커에 대한 클릭 이벤트 등록시 좌표값을 넘겨주어야 하기 때문에,
따로 함수로 등록하여 사용하시면 됩니다.

해당 내용과 관련하여 아래에 예제를 남겨드리오니 참고하시면
도움이 되실겁니다.


Ex)
반복문 {
addListener(marker, lonlat);
}

//클릭시 호출되는 함수
function addListener(marker,latlng){
marker.addListener(“click”, function(evt) {
//Popup 객체 생성.
var content ="<div class=‘m-pop’ style=‘position: static; top: 180px; left : 320px; display: flex; font-size: 14px; box-shadow: 5px 5px 5px #00000040; border-radius: 10px; width : 400px; height:100px; background-color: #FFFFFF; align-items: center; padding: 5px;’>"+"</div>";
infoWindow = new Tmapv2.InfoWindow({
position: latlng, //Popup 이 표출될 맵 좌표
content: content, //Popup 표시될 text
type: 2, //Popup의 type 설정.
map: map //Popup이 표시될 맵 객체
});
});
}


감사합니다.

0 Likes