【QT】--调用百度地图API显示-CFANZ编程社区

1、html文件

百度地图提供API示例程序
在这里插入图片描述
将代码复制到html文件中，用编辑器打开，这里用vs打开
在图中位置替换为个人申请的密钥

2、Qt程序

.pro文件中添加

QT       += webenginewidgets

注意：webenginewidgets仅在Qt5.6之后的版本中使用，且使用msvc2017以上生成工具编译。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QWebEngineView>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();
private:
    Ui::MainWindow *ui;
    QWebEnginePage *page;
    void InitForm();
};
#endif // MAINWINDOW_H

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "bridge.h"
#include <QWebChannel>
#include <QWebEngineSettings>

#define bridgeins bridge::instance()

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    InitForm();
}

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

void MainWindow::InitForm()
{
    page = ui->webView->page();//
    QString mappathA = qApp->applicationDirPath() + "/index2.html";//离线地图
    qDebug()<<mappathA;
    page->load(QUrl((mappathA)));
}
void MainWindow::on_pushButton_clicked()
{
    QString Lan=ui->Lanedit->text();
    QString Lat=ui->Latedit->text();
    QString command = QString("movepoint(%1,%2)").arg(Lan).arg(Lat);
    page->runJavaScript(command);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>

 
</head>

<body>
    <!--百度地图容器-->
    <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>



</body>
<script type="text/javascript">
//创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
      map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(116.347532,39.929166),13);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }

    // 用经纬度设置地图中心点

    function movepoint(x, y)
    {
        var mpoint = new BMap.Point(x, y);
        var zoom = map.getZoom();
        var maker = new BMap.Marker(mpoint);
        map.centerAndZoom(mpoint, zoom);
        map.addOverlay(maker);
    }

    var map;
      initMap();</script>
</html>

将第一步中保存的文件放在应用程序所在的目录（debug/release）中。
运行即可

运行结果

在这里插入图片描述

遇到的问题

直接使用百度地图提供的代码可能会运行出错，无法正常显示
在这里插入图片描述

经过尝试发现，将原本的api链接

api.map.baidu.com/api?type=webgl&v=1.0&ak

换成本文中使用的链接，可以解决不显示的问题，原因未知

api.map.baidu.com/api?v=2.0&ak