Polyline의 setMap 호출시 Node가 존재하지 않는다는 예외가 발생합니다

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

  1. Polyline 클래스도 AbstractOverlay 프로토타입을 체이닝하나요? 혹은 상속받나요?
  2. polyline이 svg path를 렌더링하는지 궁금합니다.
  3. kakao map에 overlay들을 올리는 node가 따로 존재하나요? polyline도 그 node 위에 올라가나요?
  4. overlya들을 올리는 node가 상황에 따라 없어지나요? 어떤 상황에서 없어지나요?

다른 상황에서는 정상적으로 잘 작동하나 overlay만 만들면 polyline이 모두 작동을 하지 않습니다.

overlay 인스턴스가 존재할 경우, polyline 인스턴스들의 setMap 메서드를 호출 시, setMap() 메서드에서 예외가 발생하지만, 디버깅할 때 setMap부분에 break를 하고 polyline.getMap 메서드를 호출하면 반환값이 존재합니다.

setMap 메서드에서 예외가 발생하지만 그 직후 setPath를 호출하면 동작합니다.

예외 전문은 다음과 같습니다.

TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at xb.wc (kakao.js:72:312)
    at ha.<anonymous> (kakao.js:140:56)
    at Array.forEach (<anonymous>)
    at s (kakao.js:2:339)
    at c.J (kakao.js:140:33)
    at c.jb (kakao.js:135:176)
    at c.F (kakao.js:133:65)
    at nr.updated (kakao.player.overlay.ts:274:23)
    at nr._$AE (reactive-element.js:6:5094)
    at nr.performUpdate (reactive-element.js:6:4956)
2
  1. 도형은 svg에서 ellipse, path태그로 표현되며 마커,오버레이와 도형이 올라가는 레이어는 서로 다릅니다.
  2. 마커,오버레이, 도형은 레벨이 변경되거나 지도 영역 밖으로 나갈 때 숨겨졌다가 좌표 계산 후 영역 안에 포함되면 보여집니다.
    위 내용은 개발자 도구 Element 탭에서 확인하실 수 있습니다.

그리고 AbstractOverlay 예제에서 Polyline을 추가하면 오류 없이 선이 표현되는 걸로 확인이 돼서 더 자세한 정보가 필요합니다.

먼저, AbstractOverlay를 구성할 때 createElement을 이용해서 구성했는지 확인해주세요.
Dom Element로 구성하지 않고 컴포넌트나 다른 방식으로 구현했다면 이 부분 확인 부탁드립니다.
그리고 추가 문의할 경우 현상을 확인할 수 있는 코드도 함께 첨부해주세요.

3

친절한 답변 감사합니다.
그리고 비슷한 문제를 겪을 다른 분들을 위해 해결방법을 남기자면,

문제의 원인은 kakao map이 붙는 div 노드가 제가 만든 웹 컴포넌트 내부 shadowDOM에 있어서 polyline의 setMap호출 시 내부적으로 document.getElementById를 호출할 때 shadowDOM 내에 있는 노드는 찾을 수가 없어서 예외가 발생했던 것이었습니다.

해당 웹 컴포넌트에서 shadowDOM을 open하지 않도록 하니 문제가 없어졌습니다.

1개의 좋아요