Qt加载高德在线地图

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加载高德在线地图

猜你喜欢