카카오맵 알림 메시지 표시 방법은?

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

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

스크린샷 2024-12-03 235953

카카오 맵에 첨부 이미지 와 같이 text 창을 보였다가 닫는 방법이 있을까요???

코드 구현은 kotlin jetpack compose 환경 입니다.

1개의 좋아요
2

Hello, @nari4169 I am sending you a sample code, adapt it to your own code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kakao Map InfoWindow</title>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY"></script>
</head>
<body>
    <div id="map" style="width:100%;height:500px;"></div>

    <script>
        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(33.450701, 126.570667),
            level: 3
        };

        var map = new kakao.maps.Map(container, options);

        // Create custom overlay
        var customOverlay = new kakao.maps.CustomOverlay({
            position: map.getCenter(),
            content: `
                <div style="padding:10px;background:white;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,0.3);">
                    <div style="color:black;text-align:center;">
                        Move the map to set the location
                    </div>
                </div>
            `,
            xAnchor: 0.5,
            yAnchor: 1.5
        });

        // Show overlay
        customOverlay.setMap(map);

        // Hide overlay after 3 seconds
        setTimeout(function() {
            customOverlay.setMap(null);
        }, 3000);

        // Toggle overlay on map click
        kakao.maps.event.addListener(map, 'click', function() {
            if (customOverlay.getMap()) {
                customOverlay.setMap(null);
            } else {
                customOverlay.setMap(map);
            }
        });
    </script>
</body>
</html>

This code provides the following features:

  1. Displays a custom overlay (speech bubble) in the center of the map
  2. Automatically disappears after 3 seconds
  3. Can be toggled (show/hide) by clicking on the map

Important notes:

  • Replace YOUR_APP_KEY with your actual Kakao Maps JavaScript API key
  • Styles can be customized using CSS
  • The position can be changed to any desired coordinates
  • The content text can be modified to display any message you want
3

코드 구현은 kotlin jetpack compose 환경에서 구현 중 입니다.

다른 대안은 있을까요???

4

If you tell me the programming language you use and the details, I can help you.

1개의 좋아요
5

Label API 를 이용하시고 필요한 순간에 Label.show/hide(또는 remove) 를 호출하시면 될 것 같습니다.

첨부하신 이미지와 같이 “Text 창 스타일” 은 Android 의 뷰(View)를 이용해 만든 뒤, Bitmap 으로 변환해 LabelStyles 에 넣으시면 될 것 같습니다. Android 의 뷰를 비트맵으로 바꾼 뒤, LabelStyles 에 넣는 방법은 샘플 프로젝트 에서 CalloutBalloonStyleDemoActivity > getCalloutBalloonStyle() 함수 부분 쪽을 참고 하시기 바랍니다.

1개의 좋아요