Optional options: InfoWindowOptions지도에 인포윈도우를 추가합니다.
인포윈도우를 추가할 지도입니다.
this
new InfoWindow()
.setLngLat([127.029414, 37.471401])
.setHTML("<h1>Null Island</h1>")
.addTo(map);
지정된 이벤트 유형에 리스너를 추가합니다.
리슨에 추가할 이벤트 유형입니다.
이벤트가 발생했을 때 호출되는 함수입니다. 리스너 함수는 화재에 전달된 데이터 객체와 함께 호출되며 대상 및 유형 속성으로 확장됩니다.
이전에 등록된 이벤트 리스너를 제거합니다.
리스너를 제거할 이벤트 유형입니다.
제거할 리스너 함수입니다.
InfoWindow가 추가된 지도에서 InfoWindow를 제거합니다.
this
let infoWindow = new InfoWindow().addTo(map);
infoWindow.remove();
InfoWindow 앵커의 지리적 위치를 설정하고 InfoWindow를 이동합니다. trackPointer 동작을 대체합니다.
InfoWindow의 앵커로 설정할 지리적 위치입니다.
this
let infoWindow = new InfoWindow().addTo(map);
infoWindow.setLagLat([127.029414, 37.471401]);
포인터 장치를 사용하여 InfoWindow 앵커를 화면의 커서 위치로 추적합니다(터치스크린에서는 숨겨짐). setLngLat 동작을 대체합니다.
대부분의 사용 사례에서 closeOnClick 및 closeButton을 false로 설정합니다.
this
let infoWindow = new InfoWindow({ closeOnClick: false, closeButton: false })
.setHTML("<h1>Hello World!</h1>")
.trackPointer()
.addTo(map);
HTML 요소를 반환합니다.
element
// `InfoWindow` 요소의 글꼴 크기 변경 예제
let infoWindow = new InfoWindow()
.setLngLat([127.029414, 37.471401])
.setHTML("<p>Hello World!</p>")
.addTo(map);
let infoWindowElem = infoWindow.getElement();
infoWindowElem.style.fontSize = "25px";
InfoWindow의 내용을 텍스트 문자열로 설정합니다.
이 함수는 DOM에 Text 노드를 생성합니다. 따라서 원시 HTML을 삽입할 수 없습니다. 인포윈도우 콘텐츠가 사용자 제공인 경우 XSS에 대한 보안을 위해 이 방법을 사용합니다.
인포윈도우로 띄울 텍스트 글자입니다. (HTML은 설정할 수 없으며, HTML로 설정하려면 setHTML을 참고하세요)
this
let infoWindow = new InfoWindow()
.setLngLat([127.029414, 37.471401])
.setText("Hello, world!")
.addTo(map);
인포윈도우의 내용을 문자열로 제공된 HTML로 설정합니다.
이 방법은 HTML 필터링이나 삭제를 수행하지 않으며 신뢰할 수 있는 콘텐츠에만 사용해야 합니다. 콘텐츠가 신뢰할 수 없는 텍스트 문자열인 경우 setText를 고려하세요.
인포윈도우에 대한 HTML 콘텐츠를 나타내는 문자열입니다.
this
let infoWindow = new InfoWindow()
.setLngLat([127.029414, 37.471401])
.setHTML("<h1>Hello World!</h1>")
.addTo(map);
템플릿에 정의된 place holder를 주어진 값으로 치환하여 인포윈도우의 내용을 HTML로 설정합니다. 템플릿에서 Place Holder는 주어진 data객체의 property 이름 앞과 뒤를 "#{" 와 "}"로 표시합니다.
템플릿 문자열
치환하고자 하는 값을 가지고 있는 JSON객체
let tmpl = "<h2>#{title}</h2><p>#{content}</p>";
let data = {title: "Some title", content: "Some cool content coming..."};
const infoWindow = ktGms.overlay.InfoWindow()
.setLngLat([127.029414, 37.471401])
.setDataTemplate(tmpl, data)
.addTo(map);
// result value = "<h2>Some title</h2><p>Some cool content coming...</p>"
인포윈도우의 최대 너비를 설정합니다. 이것은 CSS 속성 max-width를 설정하는 것입니다.
사용 가능한 값은 max-width에서 찾을 수 있습니다.
최대 너비 값을 나타내는 문자열입니다.
this
인포윈도우의 내용을 DOM 노드로 제공된 요소로 설정합니다.
인포윈도우의 콘텐츠로 사용할 DOM 노드입니다.
this
// 인포윈도우 콘텐츠로 요소 만들기 예제입니다.
let div = document.createElement("div");
div.innerHTML = "Hello, world!";
let infoWindow = new InfoWindow()
.setLngLat([127.029414, 37.471401])
.setDOMContent(div)
.addTo(map);
인포윈도우의 오프셋을 설정합니다.
Optional offset: Offset인포윈도우의 오프셋을 설정합니다.
this
컨테이너에 현재 해당 클래스가 있는지 여부에 따라 인포윈도우 컨테이너에서 지정된 CSS 클래스를 추가하거나 제거합니다.
추가/제거할 CSS 클래스 이름이 있는 비어 있지 않은 문자열
클래스가 제거된 경우 false를 반환하고 클래스가 추가된 경우 true를 반환합니다.
let infoWindow = new InfoWindow()
infoWindow.toggleClassName("toggleClass")
Generated using TypeDoc
InfoWindow : 인포윈도우
지도 위의 특정 지점에 대한 상세정보를 제공하기 위한 용도로 사용합니다.
인포윈도우는 말풍선과 같은 형태를 가지며 정보를 기술하는 영역과 지도상의 특정 지점과 연결되는 말풍선 anchor로 구성됩니다.
일반적으로 인포윈도우는 지도상의 특정지점(POI)상에 직접 출력되거나 마커 상단에 출력되는 형태를 가집니다.
InfoWindow 사용할 수 있는 기본 옵션은 InfoWindowOptions를 확인해주세요.
Example
See