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

Tech.Forum

Marker event 질문드립니다.

#1

마커를 클릭해, 해당 정보를 조회해 팝업으로 표시하고 있습니다.

							var marker = new Tmap.Cluster.Marker(point, {
								icon: iconImg, // 마커 이미지 url
								width: 20, // 마커 사이즈
								**data: data, // 클릭 이벤트시에 사용할 데이터**
								clickHandler: function (e) { // 클릭 이벤트 핸들러

									var rcpData = e.data;

									if( _popup ){
										_popup.destroy();
									}

									ajax({
										url: "",
										**data: rcpData,**
										success: function (response) {
											if (response.result.toLowerCase().indexOf("ok") > -1) {
												//popup 인스턴스 생성. 마지막 인자는 close 버튼의 여부를 나타냄.
												_popup = new Tmap.Popup("lablePopup",  new Tmap.LonLat(rcpData.lng, rcpData.lat).transform("EPSG:4326", "EPSG:3857"),  new Tmap.Size(290, 173),
														tmapRcpMiniPopup(response.data),  true);

												//popup.minSize=new Tmap.Size(290,207);
												//popup.closeOnMove=true;
												//popup.autoSize=true;//popup 사이즈 자동 조절
												_map.addPopup(_popup);

											} else {
												return false;
											}
										}
									});

								}
							});
							_markers.push(marker);
						})

운영중인 사이트에서 굉장히 큰 부분을 차지하고 있는 기능입니다.
버전1의 마커, 마커 이벤트, 팝업 기능(팝업 닫기 버튼 기능)이 버전2로 완전하게 적용되는지 여부 궁금합니다.

0 Likes

#2

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

문의주신 기능은 마커 생성시 마커에 클릭이벤트를 등록하시고
클릭시 인포윈도우를 생성하시고, 윈포윈도우 내부에 닫기 버튼을
등록하여 사용하시면 됩니다.
해당 내용과 관련하여 가이드링크와 예제를 남겨드리겠습니다.
참고하시면 도움이 되실겁니다.


Ex)
for(반복문){
marker.addListener("click", onClick);
markers1.push(marker);
}

//클릭시 호출되는 함수
function onClick(){
//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;’>"+"<a href=‘javascript:void(0)’ onclick=‘onClose()’ class=‘btn-close’ style=‘position: absolute; top: 10px; right: 10px; display: block; width: 15px; height: 15px;) no-repeat center;’>X</a>"+"</div>";
infoWindow = new Tmapv2.InfoWindow({
position: new Tmapv2.LatLng(rcpData.lat,rcpData.lng), //Popup 이 표출될 맵 좌표
content: content, //Popup 표시될 text
type: 2, //Popup의 type 설정.
map: map //Popup이 표시될 맵 객체
});
}

function onClose(popup){
infoWindow.setVisible(false);
}

[마커 클러스터러 사용하기 Sample]
http://tmapapi.sktelecom.com/main.html#webv2/sample/webSample80

[마커에 마우스 이벤트 등록하기 Sample]
http://tmapapi.sktelecom.com/main.html#webv2/sample/webSample19

[인포윈도우 생성하기 Sample]
http://tmapapi.sktelecom.com/main.html#webv2/sample/webSample13

[Tmapv2.InfoWindow Doc]
http://tmapapi.sktelecom.com/main.html#webv2/docs/WebDocs.InfoWindow


감사합니다.

0 Likes

#3

데이터 전달 기능이 필요합니다…
API에 제공되지 않는거같아 글남깁니다.

0 Likes

#4

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

클릭 이벤트 등록시 필요한 데이터를 따로 전달해 주는
함수를 구현하여 사용하시면 됩니다.
필요하신 데이터가 마커의 좌표 데이터 임으로
해당 내용과 관련하여 아래에 예제를 남겨 드리겠습니다.


Ex)

for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
var marker = new Tmapv2.Marker({
position: new Tmapv2.LatLng(lat + (j * 0.001), lng + (i * 0.001)),
label: ‘cluster’,
map: map
});

addListener(marker,new Tmapv2.LatLng(lat + (j * 0.001), lng + (i * 0.001)));
markers1.push(marker);
}
}

function addListener(marker,latlng){
marker.addListener(“click”, function(evt) {
console.log(latlng);
});
}


감사합니다.

0 Likes