![[QT] QT加载百度地图（一）](https://1200zi.500zi.com/uploadfile/img/15/390/38bc6d427d5928150286f5dd6797bb07.jpg)
一般步骤
在百度地图开发者网站中获取密钥在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_OBJECTpublic: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./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一样
四、运行
运行结果
添加标点
五、参考
百度地图API SDK地图JS API示例百度地图JSAPI 2.0类参考Unite OneUncaught ReferenceError: qt is not defined开源仓库：分支main
