[TOC]

基本思路

  • 百度官方提供了完整的第三方开发方案
  • 基于html和JavaScript实现
  • 可通过查看提供的API手册和开发指南实现地图功能模块的调用进而二次开发

  • 与Qt结合的思路是

    • 利用Qt内的QWebEngineView在控件上执行html，实现在线/离线调用百度地图
    • 利用Qt的QWebChannel实现Qt与JavaScript的交互

      准备工作

      在线地图实现

  • 根据开发指南，编写基础html文件 ```html <!DOCTYPE html>


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

- 在Qt的.pro中添加如下
```cpp
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 ```cpp

    ifndef BRIDGE_H

    define BRIDGE_H

include

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

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

};

endif // BRIDGE_H


- bridge.cpp
```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;
}