Map API를 이용하여 Qt환경에서 지도를 띄우는예제이다.

 

1. Maps API Key 발급 받기

1.1 NAVER 지도 API v3 클라이언트 아이디 발급 받기

NAVER 지도 API v3를 사용하려면 클라이언트 아이디를 이용해서 인증해야 한다.

(https://developers.naver.com/main/)

 

1.2 google Maps API  Key 발급 받기

구글 지도 API를 사용하려면 API Key를 이용해서 인증해야 한다.

(https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ko)

2. WebView 이용하기

Qt에서 웹페이지를 이용하기 위해서는 QWebView를 이용한다.

QWebView는 qt 5.5 이하의 버전에서만 사용이 가능하기 때문에 해당 버전에 맞게 빌드해야 한다.

QWebView를 이용하기 위해 다음과 같이 .pro 파일에 webkitwidgets을 추가한다.

QT    +=core gui webkitwidgets

 

Header 파일에 다음과 같이 QtWebKitWidgets과 QWebView를 include 한다.

#include <QMainWindow>
#include <QtWebKitWidgets>
#include <QWebView>

 

Qt Resource File을 생성하고 .qrc에 HTML 파일을 추가한다. 아래는 네이버 지도를 생성하는 기본 예제이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>간단한 지도 표시하기</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>

<script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};

var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>

 

.cpp 파일에 다음과 같이 WebView에 HTML 파일을 설정하고, 위치와 크기를 설정한다.

MainWindow::MainWindow(QWidget *parent) :
 QMainWindow(parent),
 ui(new Ui::MainWindow)
{
 ui->setupUi(this);
 m_view = ui->webView; //ui로부터 WebView 설정
 m_view->setUrl(QUrl("qrc:/naver_map.html")); //WebView에 출력할 HTML 파일 설정
 m_view->setGeometry(5,5,960,450); //WebView의 위치와 크기 설정
}
3. QSslSocket 함수 호출을 위한 dll파일 복사

프로그램을 빌드할 때 다음과 같은 오류가 발생할 경우

qt.network.ssl: QSslSocket: cannot call unresolved function SSLv23_client_method
qt.network.ssl: QSslSocket: cannot call unresolved function SSL_CTX_new
qt.network.ssl: QSslSocket: cannot call unresolved function SSL_library_init
qt.network.ssl: QSslSocket: cannot call unresolved function ERR_get_error
qt.network.ssl: QSslSocket: cannot call unresolved function ERR_get_error

Qt가 설치되어 있는 디렉토리에서 ex) C:\Qt\Tools\mingw492_32\opt\bin\libeay32.dll와 C:\Qt\Tools\mingw492_32\opt\bin\ssleay32.dll을

.exe 실행파일이 있는 디렉토리에 복사해야 한다.

4. 예제

다음 예제는 위도와 경도를 입력한 후 버튼을 클릭할 경우, 해당 위치에 마커를 생성하는 예제이다.

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtWebKitWidgets>
#include <QWebView>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
 Q_OBJECT

private:
 Ui::MainWindow *ui;
 QWebView* m_view;

private slots:
 void addMarker();

public:
 explicit MainWindow(QWidget *parent = 0);
 ~MainWindow();
};

#endif // MAINWINDOW_H


 

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
 QMainWindow(parent),
 ui(new Ui::MainWindow)
{
 ui->setupUi(this);
 m_view = ui->webView; //ui로부터 WebView 설정
 m_view->setUrl(QUrl("qrc:/naver_map.html")); //WebView에 출력할 HTML 파일 설정
 m_view->setGeometry(5,5,960,450); //WebView의 위치와 크기 설정
 connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(addMarker()));
}

MainWindow::~MainWindow()
{
 delete ui;
}

void MainWindow::addMarker()
{
 QString lat = ui->latitudeEdit->text();
 QString lng = ui->longitudeEdit->text();

 m_view->page()->mainFrame()->evaluateJavaScript(QString("addMarker(%1, %2)").arg(lat).arg(lng));
}

 

naver_map.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 <title>간단한 지도 표시하기</title>
 <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID&submodules=geocoder&callback=initMap"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>

<script>

var map;

function initMap(){

 var mapOptions = {
 center: new naver.maps.LatLng(37.3595704, 127.105399),
 zoom: 10
 };

 map = new naver.maps.Map('map', mapOptions);
}

function addMarker(lat, lng){

 map.setCenter(new naver.maps.LatLng(lat, lng));

 var marker = new naver.maps.Marker({
 position: new naver.maps.LatLng(lat, lng),
 map: map
 });
}

</script>
</body>
</html>

 

예제)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

아래의 첨부 파일은 위의 예제를 구글 API를 이용한 것이다.

첨부파일 : googleMapApi