search

johyunchol / kakao_map_plugin

MIT License
24 stars 16 forks source link

custom overlay click event listener 가 있나요? #10

Closed thkim0118 closed 8 months ago

thkim0118 commented 10 months ago

안녕하세요 custom overlay click event는 어디서 받는지 궁금합니다 .. 열심히 찾아봤는데 안보이는것 같습니다.. 혹시 제가 못찾는거라면 간단하게 알려주신다면 감사드리겠습니다

johyunchol commented 10 months ago

현재 custom overlay click event 는 구현이 안되어 있어서 해당 부분 추가 한 후에 반영하도록 하겠습니다. 반영 후 답변 드릴게요!

johyunchol commented 10 months ago

https://pub.dev/packages/kakao_map_plugin

0.1.7 버전에 custom overlay click event 를 추가 하였습니다.

example 에 overlay_21_custom_overlay1_screen.dart 파일을 보시면 되고,

customOverlayId 는 unique 한 값을 넣어주시고, onCustomOverlayTap callback 을 추가해주시면 이벤트를 받을 수 있습니다.

해당 이슈는 닫도록 할게요!

thkim0118 commented 10 months ago

애플 기기에서 테스트를 진행해보았는데요, 특정 마커에서 아래 이슈가 발생하며 click event가 발생하지 않습니다

[com.apple.VisionKit.RemoveBackground] Request to remove background on an unsupported device. Error Domain=com.apple.VisionKit.RemoveBackground Code=-8 "(null)" [UILog] Called -[UIContextMenuInteraction updateVisibleMenuWithBlock:] while no context menu is visible. This won't do anything.

johyunchol commented 10 months ago

이런 이슈가 있었군요.

혹시 마커를 클릭했을 때 인가요? 아니면 CustomOverlay 를 클릭했을 때 인가요?

thkim0118 commented 10 months ago

CustomOverlay 입니다 !

thkim0118 commented 10 months ago

그리고 customOverlay를 추가하면 아래와 같은 이슈도 간헐적으로 발생하곤 합니다

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(FWFEvaluateJavaScriptError, Failed evaluating JavaScript., A JavaScript exception occurred (WKErrorDomain:4:{WKJavaScriptExceptionLineNumber: Unsupported Type: 520, WKJavaScriptExceptionMessage: TypeError: null is not an object (evaluating 'element.addEventListener'), WKJavaScriptExceptionSourceURL: Unsupported Type: about:blank, NSLocalizedDescription: A JavaScript exception occurred, WKJavaScriptExceptionColumnNumber: Unsupported Type: 20}), null)

0 WKWebViewHostApiImpl.evaluateJavaScriptForInstances (package:webview_flutter_wkwebview/src/web_kit/web_kit_api_impls.dart:1061:7)

#1 WebKitWebViewController.runJavaScript (package:webview_flutter_wkwebview/src/webkit_webview_controller.dart:398:7) #2 KakaoMapController.addCustomOverlay (package:kakao_map_plugin/src/basic/kakao_map_controller.dart:82:9)
johyunchol commented 10 months ago

원래 kakao map api 에서는 custom overlay 에 click event 를 제공하고 있지 않아서 제가 임의대로 코드를 추가했습니다.

function addCustomOverlay(customOverlayId, latLng, content, isClickable) {
        latLng = JSON.parse(latLng);
        let markerPosition = new kakao.maps.LatLng(latLng.latitude, latLng.longitude); // 마커가 표시될 위치입니다

        content = '<div id="' + customOverlayId + '"' + content + '</div>'

        let customOverlay = new kakao.maps.CustomOverlay({
            map: map,
            clickable: isClickable,
            content: content,
            position: markerPosition,
            xAnchor: 0.5,
            yAnchor: 1,
            zIndex: 3
        });

        customOverlay.setMap(map);

        if (${widget.onCustomOverlayTap != null}) {
            let element = document.getElementById(customOverlayId);
            element.addEventListener('click', function () {
                  // 클릭한 위도, 경도 정보를 가져옵니다
                  let latLng = customOverlay.getPosition();

                  const clickLatLng = {
                    customOverlayId: customOverlayId,
                    latitude: latLng.getLat(),
                    longitude: latLng.getLng(),
                  }

                  onCustomOverlayTap.postMessage(JSON.stringify(clickLatLng));
            });
        }

        customOverlays.push(customOverlay);
    }

이 때 let element = document.getElementById(customOverlayId); customOverlayId 를 찾으려고 하는데 실제 맵이 아직 세팅되기 전에 documet 에서 찾으려 하다보니 에러가 발생한 코드이더라구요.

customOverlay.setMap(map);

부분의 호출 시점을 변경하였습니다.

혹시 같은 증상이 발현되거나 하면 작성하신 다트 소스를 첨부해 주시면 원인을 찾는데 도움이 될거 같습니다!

해당 부분은 버전 올리도록 할게요!

johyunchol commented 10 months ago

0.1.8 버전 업데이트 되었습니다!

thkim0118 commented 10 months ago

CustomOverlay를 추가 및 클릭하는 상황에서 위 언급했던 이슈를 포함한 다른 이슈도 말씀드립니다

혹시 제가 드릴만한 소스가 있다면 말씀주세요. 공유드리겠습니다 !

johyunchol commented 10 months ago

click event 등 발생하지 않는 케이스에 대해 발견하여 https://github.com/johyunchol/kakao_map_plugin/issues/12 이 이슈에서 조치 했습니다.

0.1.9 버전을 사용하시면 해결 될 것 같습니다.

혹시 같은 이슈가 발생 하는지 확인 부탁 드립니다!

thkim0118 commented 10 months ago

안타깝게도 동일하게 발생합니다 ㅠㅠ..

johyunchol commented 10 months ago

동일현상이 발현된다고 하시니 일단 reopen 하도록 하겠습니다.

원래 카카오에서 제공하는 api 에서는 custom overlay 에 click event 를 따로 제공하지 않아 제가 추가 했던 부분인데 잘 작동을 안하는거 같습니다. 다른 방향으로 수정 후 공유 드리겠습니다.

johyunchol commented 9 months ago

이슈 1 [com.apple.VisionKit.processing] Analysis not completed because device does not support Image Analysis. This will only be logged once. [com.apple.VisionKit.RemoveBackground] Request to remove background on an unsupported device. Error Domain=com.apple.VisionKit.RemoveBackground Code=-8 "(null)" [UILog] Called -[UIContextMenuInteraction updateVisibleMenuWithBlock:] while no context menu is visible. This won't do anything.

위 이슈는 "이미지 분석 및 배경 제거를 지원하지 않습니다. 따라서 위의 오류 메시지가 발생합니다." 라고 되어 있는 것 보니 최신 기기로 해야 할 듯 합니다. 제 테스트 폰(아이폰X) 에서는 해당 에러가 없었습니다. 혹시 어떤 기기인지 확인 부탁 드립니다.

이슈 2 I/chromium(29826): [INFO:CONSOLE(531)] "Uncaught ReferenceError: onCustomOverlayTap is not defined", source: about:blank (531)

위 이슈는 지난 번 addJavaScriptChannels 의 위치 변경으로 해결되어 현재 발생되고 있지 않습니다.

이슈 3 [VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(FWFEvaluateJavaScriptError, Failed evaluating JavaScript., A JavaScript exception occurred (WKErrorDomain:4:{WKJavaScriptExceptionLineNumber: Unsupported Type: 521, WKJavaScriptExceptionMessage: TypeError: null is not an object (evaluating 'element.addEventListener'), WKJavaScriptExceptionSourceURL: Unsupported Type: about:blank, NSLocalizedDescription: A JavaScript exception occurred, WKJavaScriptExceptionColumnNumber: Unsupported Type: 20}), null)
#0 WKWebViewHostApiImpl.evaluateJavaScriptForInstances (package:webview_flutter_wkwebview/src/web_kit/web_kit_api_impls.dart:1061:7)

#1 WebKitWebViewController.runJavaScript (package:webview_flutter_wkwebview/src/webkit_webview_controller.dart:398:7)

#2 KakaoMapController.addCustomOverlay (package:kakao_map_plugin/src/basic/kakao_map_controller.dart:82:9)


위 이슈는 혹시나 element 가 null 인데 addEventListener 를 하다가 나오는 이슈 일 수 있다고 생각되어 element 가 있을 때 addEvnentListener 를 수행하도록 코드를 수정하였습니다.

` if (element) { element.addEventListener('click', function () { // 클릭한 위도, 경도 정보를 가져옵니다 let latLng = customOverlay.getPosition();

    const clickLatLng = {
        customOverlayId: customOverlayId,
        latitude: latLng.getLat(),
        longitude: latLng.getLng(),
    }

    onCustomOverlayTap.postMessage(JSON.stringify(clickLatLng));
});

} `

같은 이슈 재현되는지 확인 부탁 드리며, 테스트 했던 폰, OS 버전도 알려주시면 확인 해볼 수 있을 것 같습니다!

johyunchol commented 8 months ago

같이 이슈 발현되면 이슈 reopen 부탁 드립니다!