Class Marker

지도에 마커를 추가합니다

Example

new ktGms.overlay.Marker({ lngLat:[127.01815, 37.49344] }).addTo(map);
Copy

마커에 이벤트 리스너를 추가합니다. addEventListener와 같은 역할 합니다.

Example

const ListenerFunc = () => { console.log("ListenerTest") }
marker.on("click", ListenerFunc() );
Copy

on로 추가했던 이벤트 리스너를 제거합니다. removeEventListener와 같은 역할 합니다.

마커 라벨을 반환합니다. 라벨을 설정한적이 없다면 null이 반환됩니다.

마커 라벨을 설정할 수 있습니다

Example

new ktGms.overlay.Marker({ lngLat:[127.01815, 37.49344] }).addTo(map)
     .setLabel("label", {color: "#333fff", position: "top", offset:[10,10], size: 17});
Copy

마커를 제거합니다

마커의 위치(위도,경도)를 반환합니다

마커의 위치(위도,경도)를 지정합니다

Example

new ktGms.overlay.Marker().addTo(map).setLngLat([127.01815, 37.49214]);
Copy

html 코드로 마커 아이콘을 원하는대로 커스텀할 수 있습니다

Example

//HTMLElement 만들기
let sampleElement = window.document.createElement("div");
sampleElement.innerHTML = "sampleElement"

//Marker 생성 후 setElement에 커스텀 할 HTMLElement 넣기
new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setElement(sampleElement)
Copy

Marker element를 반환합니다

이미지 url 또는 base64로 마커 아이콘을 원하는 이미지로 커스텀할 수 있습니다.
이미지의 높이와 너비는 선택적이며, 설정하지 않으면 높이 41px, 너비 27px로 기본값이 설정됩니다.

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map)
     .setImageElement("https://map.gis.kt.com/mapsdk/images/bar.png")
Copy

마커 설명 infoWindow(팝업)을 반환합니다

마커 설명 infoWindow(팝업)을 설정합니다. 기본적으로 infoWindow가 close되어 있고, 마커를 클릭하면 open이 됩니다.
infoWindow 관련 자세한 사항은 InfoWindow를 참고해주세요

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map)
     .setInfoWindow(new ktGms.overlay.InfoWindow().setHTML("<h1>Hello World!</h1>""))   
Copy

마커의 infoWindow를 토글 시킵니다.
infoWindow가 open 되어 있으면 close하고, infoWindow가 close 되어있으면 open합니다

마커의 infoWindow가 있고, infoWindow가 close되어 있으면 open합니다.

마커의 infoWindow가 있고, infoWindow가 open되어 있으면 close합니다.

마커의 오프셋을 반환합니다

마커의 오프셋을 설정합니다

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setOffset([0,0]);   
Copy

마커의 드래그 가능 여부를 반환합니다

마커의 드래그 가능 여부를 설정합니다

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setDraggable(true);   
Copy

마커의 회전 각도를 반환합니다

마커의 회전 각도를 설정합니다.
60으로 설정하면 마커가 오른쪽으로 60도 회전하고, -60으로 설정하면 왼쪽으로 60도 회전합니다.

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setRotation(60);   
Copy

지도 회전 시 마커의 회전 유형을 반환합니다. 기본값은 auto입니다.
map으로 설정하면 map의 bearing(회전)에 따라 marker의 각도도 함께 변경되고,
viewport 또는 auto로 설정하면 map의 bearing 변경과 상관없이 marker의 각도는 변하지 않습니다.

지도 회전 시 마커의 회전 유형을 설정합니다. 기본값은 auto입니다.
map으로 설정하면 map의 bearing(회전)에 따라 marker의 각도도 함께 변경되고,
viewport 또는 auto로 설정하면 map의 bearing 변경과 상관없이 marker의 각도는 변하지 않습니다.

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setRotationAlignment("map");   
Copy

지도 pitch 조정 시 마커의 pitch 조정 유형을 반환합니다. 기본값은 auto입니다.
map으로 설정하면 pitch 변경에 따라 marker의 pitch도 함께 변경되고,
viewport 또는 auto로 설정하면 pitch 변경과 상관없이 marker는 viewport와 평행합니다.

지도 pitch 조정 시 마커의 pitch 조정 유형을 설정합니다. 기본값은 auto입니다.
map으로 설정하면 pitch 변경에 따라 marker의 pitch도 함께 변경되고,
viewport 또는 auto로 설정하면 pitch 변경과 상관없이 marker는 viewport와 평행합니다.

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setPitchAlignment("map");   
Copy

마커를 마우스 클릭으로 제거할 수 있는지에 대한 여부를 반환합니다. 설정한적이 없다면 기본값인 false가 반환됩니다.

마커를 마우스 클릭으로 제거할 수 있는지에 대한 여부를 설정합니다. true로 설정 시, 마커에 마우스를 올려두면 x 버튼이 뜨고, x버튼 클릭 시 마커가 제거됩니다.

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setRemovable(true);   
Copy

마커를 바운스(1초마다 위아래로 이동)할지에 대한 여부를 설정합니다

Example

new ktGms.overlay.Marker({lngLat:[127.01815, 37.49114]}).addTo(map).setBounceAnimation(true);   
Copy

마커의 속성 정보를 반환합니다. 마커 생성 시 설정한 data 옵션 및 setData로 설정한 속성 정보를 반환합니다.

마커의 속성 정보를 설정할 수 있습니다. MarkerOptions의 옵션 외에 마커에 고유 속성을 추가하고 싶을 때 사용할 수 있습니다.
Marker 생성 시 data 옵션으로 설정할 수 있으며, Marker 생성 후 setData 메소드로도 설정할 수 있습니다.
setData 메소드로 옵션 설정 시, Marker 생성할 때 설정했던 data 옵션과 비교하여 추가 및 변경됩니다.

Example

let marker = new ktGms.overlay.Marker({
     lngLat: [127.01815, 37.49214],
     data: {name:"marker"}
})
marker.addTo(map);
marker.setData({name: "mark", count: 3});
console.log(marker.getData()); // {name:"mark", count:3}
Copy