[QT] QT加载百度在线地图（一）

yunke120

已于 2022-08-16 18:13:37 修改

阅读量8k

点赞数 12

分类专栏： QT 文章标签： qt 百度地图

于 2022-05-08 23:45:10 首次发布

本文链接：https://blog.csdn.net/qq_39295354/article/details/124655026

版权

QT 专栏收录该内容

21 篇文章 16 订阅

订阅专栏

一般步骤

在百度地图开发者网站中获取密钥
在QT中创建示例工程
创建网页index.html
运行
参考

一、在百度地图开发者网站中获取密钥

选择Javascript API
在这里插入图片描述

完成以下三步

在控制台->我的应用里便可以查看自己应用的Key

二、在QT中创建示例工程

需要注意的点是，

必须选择MSVC编译
在pro文件中添加
```
QT += webenginewidgets
```
将Widget控件提升为QWebEngineView
在路径G:\QT\Qt_data\Examples\Qt-5.13.0\webchannel\shared下拷贝qwebchannel.js文件备用，此文件是QT程序与JS文件通讯用的
Widget.h 代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QWebEngineHistory>
#include <QWebEngineHistoryItem>
#include <QWebEnginePage>
#include <QWebEngineView>
#include <QtWebEngineWidgets/QtWebEngineWidgets>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void on_pushButton_clicked();

private:
    Ui::Widget *ui;
};

#endif // WIDGET_H

Widget.cpp 代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QFile>
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    QString htmlPath = QCoreApplication::applicationDirPath() + "/html/";
    QString htmlFile = htmlPath + "index.html";
    qDebug() << htmlFile; /* 获取你要显示网页的路径 */
    QFile file(htmlFile);
    if(!file.exists())
        qDebug() << "html file is not exist";
    /* 创建一个与网页交互的通道 */
    QWebChannel *webChannel = new QWebChannel(ui->widget->page()); 
    ui->widget->page()->setWebChannel(webChannel);
    /* 注册通道，ID 为 JSInterface，其将在JS文件这引用 */
    webChannel->registerObject(QString("JSInterface"), ui->widget);
    /* 加载网页，注意加载网页必须在通道注册之后，其有有一个注册完成的信号，
       可根据需要调用 */
    ui->widget->page()->load(QUrl("file:///" + htmlFile));
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_pushButton_clicked()
{
    QString str = ui->lineEdit->text();
    QString lon = str.split(",")[0];
    QString lat = str.split(",")[1];
    QString cmd=QString("myMarker(%1,%2)").arg(lon).arg(lat);
    qDebug() << cmd;
    ui->widget->page()->runJavaScript(cmd);
}

三、创建网页`index.html`

网页 demo参考百度的帮助文档
index.html

<!DOCTYPE html> 
<html>
	<head> 
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>BDMap Sample</title> 
		<style type="text/css"> 
			html{height:100%} 
			body{height:100%;margin:0px;padding:0px} 
			#container{height:100%} 
		</style> 
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=2TooSnYtYgT5BPwXuND1G6gmHkYCA3mZ"></script>
		<script type="text/javascript" src="qwebchannel.js"></script>   <!-- 与qt交互 -->
	</head> 

	<body> 
		<div id="container"></div>
		
		<script type="text/javascript">
			var map = new BMapGL.Map("container");           // 创建地图实例 
			var point = new BMapGL.Point(113.557892,34.8333);   // 创建点坐标 
			map.centerAndZoom(point, 15);                    // 初始化地图，设置中心点坐标和地图级别 
			map.enableScrollWheelZoom(true);                 // 设置滚轮缩放
			// map.setMapType(BMAP_EARTH_MAP);                  // 设置地图样式，地球模式    
			// 创建标点  
			var point = new BMapGL.Point(113.557892, 34.8333);   
			var marker = new BMapGL.Marker(point);        // 创建标注   
			map.addOverlay(marker);                     // 将标注添加到地图中 

			var opts = {
				width: 250,     // 信息窗口宽度
				height: 100,    // 信息窗口高度
				title: "New Marker"  // 信息窗口标题
			}
			var infoWindow = new BMapGL.InfoWindow("Marker", opts);  // 创建信息窗口对象
			marker.addEventListener("click", function(){                    // 标点添加点击事件
				map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
			});
           /*****************************/
			// qt交互注册
			new QWebChannel(qt.webChannelTransport,
				function(channel){
					window.JSInterface = channel.objects.JSInterface; // 注册
				}
			);

			function addMarker(lng,lat){
				var newpoint=new BMapGL.Point(lng,lat);
				var newmarker = new BMapGL.Marker(newpoint);        // 创建标注
				map.addOverlay(newmarker);
				alert('ok');
			};
          /******************************/
	</script> 
	</body> 
</html>

注意第43行中的JSInterface要和QT中定义的ID一样

四、运行

运行结果
在这里插入图片描述
添加标点

五、参考

开源仓库：分支main

yunke120

关注

12
点赞
踩
130

收藏

觉得还不错? 一键收藏
24
评论
[QT] QT加载百度在线地图（一）

一般步骤在百度地图开发者网站中获取密钥在QT中创建示例工程创建网页index.html运行参考一、在百度地图开发者网站中获取密钥选择Javascript API完成以下三步在控制台->我的应用里便可以查看自己应用的Key二、在QT中创建示例工程需要注意的点是，必须选择MSVC编译在pro文件中添加QT += webenginewidgets将Widget控件提升为QWebEngineView在路径G:\QT\Qt_data\Examples\Qt-
复制链接

扫一扫