版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhango5/article/details/73457316
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槽函数