【Qt】地图交互

拾壹Masquerade

已于 2022-03-28 08:48:14 修改

阅读量1.5k

点赞数 3

分类专栏：【Qt】文章标签： qt5

于 2021-08-22 21:39:31 首次发布

本文链接：https://blog.csdn.net/weixin_42596474/article/details/119858412

版权

【Qt】专栏收录该内容

9 篇文章 1 订阅

订阅专栏

基本思路

百度官方提供了完整的第三方开发方案
基于html和JavaScript实现
可通过查看提供的API手册和开发指南实现地图功能模块的调用进而二次开发
与Qt结合的思路是
- 利用Qt内的QWebEngineView在控件上执行html，实现在线/离线调用百度地图
- 利用Qt的QWebChannel实现Qt与JavaScript的交互

准备工作

在线地图实现

根据开发指南，编写基础html文件

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密钥"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>

<script src="qwebchannel.js"></script>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap", {enableMapClick:false});// 创建Map实例，关闭底图可点功能
	map.centerAndZoom(new BMap.Point(126.639, 45.7527), 19);  // 初始化地图,设置中心点坐标和地图级别
	//****添加缩放按钮
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
	map.addControl(top_left_control);        
	map.addControl(top_left_navigation);     
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
    map.setCurrentCity("哈尔滨");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

关于密钥：根据指南自行申请百度开发者帐号和密钥（限制调用的计算资源）
关于控件：地图上的小工具和功能均有对应API调用实现
关于交互：Line17 的qwebchannel.js文件可在Qt的安装目录下找到，拷贝到与该html同一级目录下
按需添加include，基本上根据类名会自动补全

程序细节

在Qt的.pro中添加如下

QT       += core gui webchannel webengine webenginewidgets network

ui设计添加QGraphicsView控件（此处命名graphicsView_map），并提升为QWebEngineView

QDir temDir("../baidumap.html");
QString absDir = temDir.absolutePath();
QString filePath = "file:///" + absDir;
ui->graphicsView_map->page()->load(QUrl(filePath));

temDir为该html文件的文件路径

交互功能

JavaScript -> Qt

Qt添加WebChannel
这里新建了一个类bridge承接Qt中的方法与JavaScript中的方法的映射函数
bridge.h

#ifndef BRIDGE_H
#define BRIDGE_H

#include <QObject>

class bridge : public QObject
{
    Q_OBJECT
public:
    bridge(QObject *parent = nullptr);

public slots:
    void getCoordinate(QString lon,QString lat);

};

#endif // BRIDGE_H

bridge.cpp

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

bridge::bridge(QObject *parent) : QObject(parent)
{

}

void bridge::getCoordinate(QString lon, QString lat)
{
    qDebug()<<lon<<lat;
}

在Qt加载地图网页部分添加

channel = new QWebChannel(this);
qtJsBridge = new bridge();
channel->registerObject("bridge_name",(QObject*)qtJsBridge);
ui->graphicsView_map->page()->setWebChannel(channel);

在html文件中添加

    new QWebChannel(
        qt.webChannelTransport,
        function (channel)
        {
            window.bridge_js = channel.objects.bridge_name;  //bridge_name 与QT 中一致
        });

可以这样理解：通过window.bridge_js = channel.objects.bridge_name，使得在JavaScript中bridge_js这个对象与标签bridge_name所指向的Qt中的对象qtJsBridge实现对应
此时，即可通过bridge_js调用qtJsBridge下的方法，注意该方法必须被声明在public slots:下，猜测这里的交互实现本质上也是利用了Qt的信号槽函数机制

Qt -> JavaScript

html文件以及其中的Javascript部分本质上属于Javascript脚本
因此从Qt调用Javascript的方法其实就是向脚本传递指令


    QString jsCmd = QString( "add_point(\"%1\",\"%2.png\",%3,%4)" )
            .arg(tempPoint->id)
            .arg(tempPoint->planeSet)
            .arg(tempPoint->longtitude)
            .arg(tempPoint->latitude);

    //send Js commond to html
    ui->graphicsView_map->page()->runJavaScript(jsCmd);