用c++/qml/js 获取高德地图逆地理编码
当然，这里只是大体描述一下这个流程，无需纠结一些细节，比方说一些设置啊，样式啊等等。
首先，是几个资源文件，我把相关的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>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=mykey&plugin=AMap.Geocoder">script>
<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
#include
#include
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
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是资源文件的名字，当然这是另外一个问题，碰上了就说下