【QT】--调用百度地图API显示

置顶 vhcjgc

已于 2022-07-12 09:15:41 修改

阅读量4.4k

点赞数 9

分类专栏： QT 文章标签： QtWebEngineWidgets 百度地图API MSVC2019 release编译 QWebEngineView

于 2022-03-31 19:21:48 首次发布

本文链接：https://blog.csdn.net/vhcjgc/article/details/123880260

版权

QT 专栏收录该内容

16 篇文章 16 订阅

订阅专栏

编译运行环境

Qt 5.15.2
MSVC2019
release编译

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

补充

上述两个连接的区别在于

传统版本的引用（以 2.0 版本为例）：http://api.map.baidu.com/api?v=2.0&ak=xxxxx
WebGL 版本的引用（当前为 1.0 版本）：http://api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxx

百度地图JSAPI WebGL v1.0类参考

前文运行出错的可能原因

QWebEngine组件只支持MSVC编译器，不支持mingw编译器，且编译时只能使用release版本
实测在MSVC2019，release编译可实现两种版本的引用

vhcjgc

关注

9
点赞
踩
49

收藏

觉得还不错? 一键收藏
17
评论
【QT】--调用百度地图API显示

1、html文件百度地图提供API示例程序将代码复制到html文件中，用编辑器打开，这里用vs打开在图中位置替换为个人申请的密钥2、Qt程序.pro文件中添加QT += webenginewidgets注意：webenginewidgets仅在Qt5.6之后的版本中使用，且使用msvc2017以上生成工具编译。#ifndef MAINWINDOW_H#define MAINWINDOW_H#include <QMainWindow>#include &l
复制链接

扫一扫