[QT] QT加载百度在线地图（一） |
您所在的位置：网站首页 › 怎么下百度地图 › [QT] QT加载百度在线地图（一） |
[QT] QT加载百度在线地图（一）
|
一般步骤
在百度地图开发者网站中获取密钥在QT中创建示例工程创建网页index.html运行参考
一、在百度地图开发者网站中获取密钥
选择Javascript API 需要注意的点是， 必须选择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
#include
#include
#include
#include
#include
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
#include
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
QString htmlPath = QCoreApplication::applicationDirPath() + "/html/";
QString htmlFile = htmlPath + "index.html";
qDebug() 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() page()->runJavaScript(cmd);
}
三、创建网页index.html
网页 demo参考百度的帮助文档index.html
DOCTYPE html>
BDMap Sample
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
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');
};
/******************************/
注意第43行中的JSInterface要和QT中定义的ID一样 四、运行运行结果 开源仓库：分支main |
完成以下三步 
在控制台->我的应用里便可以查看自己应用的Key 
添加标点 
【本文地址】
今日新闻 |
推荐新闻 |