您的位置：首页 > 编程语言 > Qt开发

Qt加载高德在线地图

2017-06-19 10:09 489 查看
Qt使用QWebView加载高德地图

首先 widget.h文件中对变量、槽函数声明

private:
QWebView* m_pWebView;    // QWebView对象

private slots:
void onPageLoadFinished(bool);    // 地图加载完毕槽函数

public slots:
void onMapClickCallback();    // 点击地图时槽函数，必须是public的


widget.cpp中应用

初始化：

m_pWebView = new QWebView(this);

connect(m_pWebView, SIGNAL(loadFinished(bool)), this, SLOT(onPageLoadFinished(bool)));

m_pWebView->settings()->setAttribute(QWebSettings::JavascriptEnabled,true);
m_pWebView->settings()->setAttribute(QWebSettings::JavaEnabled,true);
m_pWebView->settings()->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
m_pWebView->settings()->setAttribute(QWebSettings::JavascriptCanAccessClipboard,true);
m_pWebView->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled,true);
m_pWebView->settings()->setAttribute(QWebSettings::LocalContentCanAccessRemoteUrls, true);
m_pWebView->settings()->setAttribute(QWebSettings::LocalContentCanAccessFileUrls, true);
m_pWebView->settings()->setAttribute(QWebSettings::JavascriptCanCloseWindows, true);
m_pWebView->settings()->setAttribute(QWebSettings::AutoLoadImages,true);
m_pWebView->settings()->setAttribute(QWebSettings::PluginsEnabled, true);


设置高德地图的html页面文件：

方法一：

QFile file("D:/test.html");
file.open(QIODevice::ReadOnly);
QTextStream out(&file);
QString output_file = out.readAll();
m_pWebView->setHtml(output_file);


方法二：

QFileInfo file("D:/test.html");

QString url = "file:///";
url += file.absoluteFilePath();

m_pWebView->setUrl(QUrl(url));


实现两个槽函数：

void Widget::onMapClicked(QString msg)
{
QMessageBox::information(NULL, QObject::tr("Lng&Lat"), msg);
}

void Widget::onPageLoadFinished(bool arg)

{
qDebug() << "load finished";
m_pWebView->page()->mainFrame()->evaluateJavaScript(QString("loadfinishtip()"));    // 加载完成后，执行页面js函数loadfinishtip
m_pWebView->page()->mainFrame()->addToJavaScriptWindowObject("Dialog", this);    // js中添加窗口对象，用于回调Qt槽函数
}


高德地图test.html文件：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>基本地图展示</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<!--script src="http://cache.amap.com/lbs/static/es5.min.js"></script-->
<script src="http://webapi.amap.com/maps?v=1.3&key=申请的key"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>

<script>
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]

});

function loadfinishtip() {
alert("amap load finish.");
}

map.on('click', function(e) {
var lng = e.lnglat.getLng();
var lat = e.lnglat.getLat();

Dialog.onMapClicked(lng + "," + lat);    // 调用Qt槽函数
});

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




地图上的控件或者呈现的效果都在html中实现，这里只介绍调用js函数，和js中调用Qt槽函数
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Qt 高德地图
相关文章推荐
新的分享
章节导航