1. Kakao developers 활성화

더보기

*절대 외부로 공개하지 않는다.

 

1. 앱 생성

 

 

 

 

 2. API 확인 및 테스트 도메인 등록

JS API 키 저장
  • Kakao Developers >> 앱 >> 일반 >> 플랫폼 >> Web  도메인 등록
    • http://127.0.0.1:8000
    • http://localhost:8000 

 

 

 

 

3. 카카오맵 활성화 

 

2. Kakao Map 웹페이지 테스트

더보기

1. vscode 에서, map.html 파일을 생성하고, 아래 html 파일을 만들어주세요.

- 자신의 JS key 값을 입력해주세요

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Kakao Map in Qt6 WebEngine</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Kakao Maps JS SDK -->
  <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=자신의JS키입력&autoload=false"></script>

  <!-- QWebChannel (Qt에서 제공) -->
  <script src="qrc:///qtwebchannel/qwebchannel.js"></script>

  <style>
    html, body { height: 100%; margin: 0; }
    #map { width: 100%; height: 100%; }
    .label {
      background: white; border: 1px solid #333; border-radius: 4px;
      padding: 2px 6px; font-size: 12px;
    }
  </style>
</head>
<body>
<div id="map"></div>

<script>
  let map, markers = [];

  // C++와의 브릿지 준비
  function setupChannel() {
    if (window.qt && qt.webChannelTransport) {
      new QWebChannel(qt.webChannelTransport, function(channel) {
        window.bridge = channel.objects.bridge;
        console.log("[QWebChannel] bridge ready:", !!window.bridge);
      });
    } else {
      console.warn("QWebChannel transport not found.");
    }
  }

  // 맵 초기화
  function initMap() {
    const container = document.getElementById('map');
    const center = new kakao.maps.LatLng(37.5665, 126.9780); // 서울

    map = new kakao.maps.Map(container, {
      center: center,
      level: 5 // 1(가까움)~14(멀어짐)
    });

    // 클릭 이벤트: 좌표를 C++로 전달
    kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
      const latlng = mouseEvent.latLng;
      if (window.bridge && window.bridge.onMapClick) {
        window.bridge.onMapClick(latlng.getLat(), latlng.getLng());
      }
    });
  }

  // [C++→JS] 마커 추가
  function addMarker(lat, lng, label) {
    const pos = new kakao.maps.LatLng(lat, lng);
    const marker = new kakao.maps.Marker({ position: pos });
    marker.setMap(map);
    markers.push(marker);

    if (label) {
      const iwContent = '<div class="label">' + label + '</div>';
      const iw = new kakao.maps.InfoWindow({ content: iwContent });
      iw.open(map, marker);
    }
  }

  // [C++→JS] 지도 중심/레벨 이동
  function focus(lat, lng, level) {
    const pos = new kakao.maps.LatLng(lat, lng);
    map.setCenter(pos);
    if (typeof level === 'number') {
      map.setLevel(level);
    }
  }

  // SDK 로드 후 초기화
  kakao.maps.load(function() {
    setupChannel();
    initMap();
  });
</script>
</body>
</html>

 

 

2. html 코드를 더블클릭하여, 웹 브라우저에서 실행 확인합니다.

- 자신의 API key 값을 추가해주세요

 

3. 간단한 웹 서버 동작시키기

더보기

1. html 파일을 생성한 경로에서 http.server 를 실행합니다.

python3 -m http.server 8000

 

 

2. 웹 브라우저에서를 실행하고, "localhost + 웹페이지" 주소로 호출합니다.

http://127.0.0.1:8000/test01.html

 

 

3. 예시에서 보았듯 웹 브라우저를 이용하면 카카오 지도(Maps)를 손쉽게 사용할 수 있습니다.

Qt에서는 WebEngine 모듈을 통해 애플리케이션의 일부를 브라우저처럼 활용할 수 있으므로,

브라우저에 표시되는 지도를 그대로 앱 내부에 임베드하여 표시할 수 있습니다.

 

 

4.구현해야 할 기능의 동작은 아래와 같습니다.

  • Qt 값 >> Map 이동 및 좌표 마커
  • Map 동작 >> Qt 값 >> Qt 로직


4. Qt Webengin 모듈 추가 설치

더보기

 1. qt maintenance tool을 미러사이트 설정과 함께 실행합니다.

/home/basic/Qt/MaintenanceTool --mirror http://ftp.jaist.ac.jp/pub/qtproject/

 

 

2. 추가 모듈을 선택 설치한다.

  1. web 키워드로 검색한다.
  2. Extensions - Qt WebEngine - Qt Version 으로 선택한다.
  3. Qt - Additional Libraries - Qt Web 관련 라이브러리를 선택한다.  

 

 

3. Qt 프로젝트에서, CMakeList.txt 에 추가한다.

WebEngineWidgets 
WebChannel
Qt6 :: WebEngineWidgets
Qt6 :: WebChannel
set (CMAKE_AUTOUIC ON)
set (CMAKE_AUTOMOC ON)
set (CMAKE_AUTORCC ON)

 

5. Qt 실행파일

더보기

1. 소스파일

mapEx07_Kakao.zip
0.01MB

Qt 리소스 파일의 html 코드 내부에, API key를 입력해야 합니다.

 

 

2. 실행 결과

 

 

3. 카카오맵 지도 Web API 가이드

 

Kakao 지도 Web API Sample

 


 

 

 

티스토리툴바