用c++/qml/js 获取高德地图逆地理编码

最新推荐文章于 2023-06-29 20:39:56 发布

MYTCHITOS

最新推荐文章于 2023-06-29 20:39:56 发布

阅读量1.1k

点赞数

分类专栏： Qt 文章标签： javascript qt

本文链接：https://blog.csdn.net/MYTCHITOS/article/details/121650361

版权

Qt 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

当然，这里只是大体描述一下这个流程，无需纠结一些细节，比方说一些设置啊，样式啊等等。

首先，是几个资源文件，我把相关的html、js都加到了资源文件里边，不想加的当然也可以。
其中qwebchannel.js是qt官方提供的必须的文件，具体就不说了。其它几个文件如下：

map.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
     <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
     <style>
      html,body,#container{
        height: 100%
      }
     </style>
  </head>
  <body>
    <div id='container'></div>
    <!--高德地图SDK--,其中的mykey是去官网自己申请的-->
    <script src="https://webapi.amap.com/maps?v=1.4.12&key=mykey&plugin=AMap.Geocoder"></script>
    <!--html与qml通信必备的js文件-->
    <script src='qrc:/qwebchannel.js'></script>
    <script src='qrc:/map.js'></script>
  </body>
</html>

map.js

var map = new AMap.Map('container',{});
map.plugin(["AMap.Geocoder"], function() {
    var geocoder = new AMap.Geocoder();
    // 创建qml 通道
    new QWebChannel(qt.webChannelTransport, function(channel){
         qmlChannel = channel.objects.qmlChannel
         qmlChannel.lnalatToGeo.connect(function(lng, lat) {
         geocoder.getAddress([lng, lat], function(status, result){
                   if (status === 'complete' && result.regeocode){
                       qmlChannel.setDeviceGeo(result, lng, lat)
                   }
             })
         })
    }) 
});

map.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3
import QtWebView 1.1
import QtWebChannel 1.13
import QtQuick.Dialogs 1.0

import QtWebEngine 1.4
import QtWebSockets 1.1

Item {
    id: mainQml

    signal qmlSendMsg(string arg1,string arg2)

    WebEngineView {
        visible: false
        id: mapView
        url: "qrc:/map.html"
        webChannel: mapChannel
    }
    QtObject {
        id: mapData
        WebChannel.id: 'qmlChannel'

        signal lnalatToGeo(string lng, string lat)
        function setDeviceGeo(result, lng, lat) {
            updateDeviceGeocoder(result, lng, lat)
        }
    	 function updateDeviceGeocoder(msg, lng, lat) {
            var info = msg["info"]
            console.log("DeviceGeocoder---------",info,lng,lat)
            
            if(msg["info"] !== "OK"||lng===""||lat===""){
               return
            }
            var regeocode = msg["regeocode"]
            var addressComponent = regeocode["addressComponent"]
            addressComponent['longitude'] = lng
            addressComponent['latitude'] = lat
            console.log("DeviceGeocoder---------",addressComponent.province,
            				addressComponent.city,
                        	addressComponent.district,
                        	addressComponent.street, lng,lat)
        }
    }
    WebChannel {
        id: mapChannel
        registeredObjects: [mapData]
    }
    function test(val_arg){
        console.log("qml method runing",val_arg,"return ok")
        //需要说明的是，发出lanlatToGeo信号后，结果是异步返回的，
        //返回结果在上面的updateDeviceGeocoder函数中处理，
        //然后是给C++对象发信号还是直接调用函数，都是可以的，
        //C++与QML交互的范例网上很多，这里就懒得写了
        mapData.lnalatToGeo("116.46", "39.92")          
        return "ok"
    }
}

然后是C++程序相关的部分
4. mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtWebEngine/QtWebEngine>
#include <QQmlComponent>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

    QQmlEngine engine;
    QQmlComponent *component;
    QObject *object;
private slots:
    void on_pushButton_clicked();
private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    component=new QQmlComponent(&engine,QUrl("qrc:/map.qml"));
    object = component->create();
}
MainWindow::~MainWindow()
{
    delete ui;
}
void MainWindow::on_pushButton_clicked()
{
    QVariant returnedValue;
    QVariant msg = "hi from C++";
    QMetaObject::invokeMethod(object, "test",
            Q_RETURN_ARG(QVariant, returnedValue),
            Q_ARG(QVariant, msg));
    qDebug() << "value returned from QML :" << returnedValue.toString();
}

后话

有时候在装载WebEngineView时会引发段错误，这时候就要检查一下用的是哪一个Application类，如果是不包含gui的，那么就有可能会出现这个错误。
有时候debug编译正常，但是release编译提示找不到资源文件，这时候需要在.pro文件中添加QTQUICK_COMPILER_SKIPPED_RESOURCES += xxx.qrc，其中xxx.qrc是资源文件的名字，当然这是另外一个问题，碰上了就说下

MYTCHITOS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用c++/qml/js 获取高德地图逆地理编码

当然，这里只是大体描述一下这个流程，无需纠结一些细节，比方说一些设置啊，样式啊等等。首先，是几个资源文件，我把相关的html、js都加到了资源文件里边，不想加的当然也可以。其中qwebchannel.js是qt官方提供的必须的文件，具体就不说了。其它几个文件如下：map.html<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta http
复制链接

扫一扫