Qt QWebEngineView加载百度地图，根据经纬度或位置刷新

最新推荐文章于 2024-05-11 14:19:21 发布

qq_24127015

最新推荐文章于 2024-05-11 14:19:21 发布

阅读量2.6k

点赞数 7

分类专栏： Qt

本文链接：https://blog.csdn.net/qq_24127015/article/details/115251827

版权

Qt 专栏收录该内容

100 篇文章 18 订阅

订阅专栏

1.首先需要在百度地图开发者页面注册并获取密钥

打开百度地图开发平台：http://lbsyun.baidu.com/
登录百度账户
点击控制台，打开控制台页面
在控制台页面，创建应用

5.白名单输入*

6.提交之后就可以看到密钥了

2.使用密钥获取html并显示

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-sacale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Main Map View </title>
    <style type="text/css">
        body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IFufG7aBmmHCAZ3ZNx8V8VqUW0foz7ws"></script>
</head>
<body>
    <div id="map" ></div>
</body>
</html>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map"); 
      map.centerAndZoom(new BMap.Point(116.323066,39.989956),15);
    }
    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 relocationByLola(lo,la,zoomlevel) {// 根据经纬度定位地点
        map.centerAndZoom(new BMap.Point(lo,la),zoomlevel);
    }
    function relocationByArea(area,zoomlevel) {// 根据查找位置定位地点
        map.centerAndZoom(area,zoomlevel);
    }
    var map;
      initMap();
  </script>

3.Qt 程序

源码地址：https://gitee.com/liuzhichao_rain/my-map.git

说明：

可以设置放大级别，可以经纬度定位或是输入地点查询定位。

生成：生成一个html文件

定位：在html文件上执行javascript

myMap.pro

#-------------------------------------------------
#
# Project created by QtCreator 2021-03-26T14:08:04
#
#-------------------------------------------------

QT       += core gui webenginewidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = myMap
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which has been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

CONFIG += c++11

SOURCES += \
        main.cpp \
        widget.cpp

HEADERS += \
        widget.h

FORMS += \
        widget.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

RESOURCES += \
    images.qrc

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QWebEngineView>
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();
    void initMap();
protected:
    void resizeEvent(QResizeEvent* event) override;
private slots:
    void on_createMap_clicked();

    void on_locationBtn_clicked();

private:
    Ui::Widget *ui;
    QWebEngineView* mainMapView = nullptr;

    double longitude = 116.323066;// 经度
    double latitude = 39.989956;// 纬度
    QString location= QStringLiteral("天安门");// 查询地点
    int zoomLevel = 15;// 放大级别
    QString key = "IFufG7aBmmHCAZ3ZNx8V8VqUW0foz7ws";// 查询密钥
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include <QFile>
#include <QCoreApplication>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    ui->longitudeLineEdit->setText(QString::number(longitude));
    ui->latitudeLineEdit->setText(QString::number(latitude));
    ui->locationLineEdit->setText(location);
    ui->zoomLevelLineEdit->setText(QString::number(zoomLevel));
    ui->keyLineEdit->setText(key);
    ui->lalaRadio->setChecked(true);
    initMap();
}

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

void Widget::initMap()
{
    mainMapView = new QWebEngineView(ui->mapWidget);
    mainMapView->resize(ui->mapWidget->size());
    qDebug()<<ui->mapWidget->size();
    mainMapView->load(QUrl("qrc:/images/map/map.html"));
    //mainMapView->load(QUrl(QCoreApplication::applicationDirPath() + "/current.html"));
    mainMapView->show();
    mainMapView->installEventFilter(this);
}

void Widget::resizeEvent(QResizeEvent* event)
{
    Q_UNUSED(event)
    mainMapView->resize(ui->mapWidget->size());
}

void Widget::on_createMap_clicked()
{
    this->longitude = ui->longitudeLineEdit->text().toDouble();
    this->latitude = ui->latitudeLineEdit->text().toDouble();
    this->zoomLevel = ui->zoomLevelLineEdit->text().toInt();
    QString strHtml = QString::fromLocal8Bit("<!DOCTYPE html>\n"
                      "<html>\n"
                      "<head>\n"
                      "<meta name=\"viewport\" content=\"initial-sacale=1.0, user-scalable=no\" />\n"
                      "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">\n"
                      "<title>Main Map View </title>\n"
                      "<style type=\"text/css\">\n"
                      "body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:\"微软雅黑\";}\n"
                      "</style>\n"
                      "<script type=\"text/javascript\" src=\"http://api.map.baidu.com/api?v=2.0&ak=IFufG7aBmmHCAZ3ZNx8V8VqUW0foz7ws\"></script>\n"
                      "</head>\n"
                      "<body><div id=\"map\" ></div></body>\n"
                      "</html>\n");
    QString strJs = QString::fromLocal8Bit("<script type=\"text/javascript\">\n"
                    "//创建和初始化地图函数：\n"
                    "function initMap(){\n"
                    "createMap();//创建地图\n"
                    "setMapEvent();//设置地图事件\n"
                    "addMapControl();//向地图添加控件\n"
                    "addMapOverlay();//向地图添加覆盖物\n"
                    "}\n"
                    "function createMap(){\n"
                    "map = new BMap.Map(\"map\");\n"
                    "map.centerAndZoom(new BMap.Point(%1,%2),%3);\n"
                    "}\n"
                    "function setMapEvent(){\n"
                    "map.enableScrollWheelZoom();map.enableKeyboard();map.enableDragging();map.enableDoubleClickZoom()\n}\n"
                    "function addClickHandler(target,window){\ntarget.addEventListener(\"click\",function(){\n"
                    "target.openInfoWindow(window);});}\n"
                    "function addMapOverlay(){}\n"
                    "//向地图添加控件\n"
                    "function addMapControl(){\n"
                    "var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});\n"
                    "scaleControl.setUnit(BMAP_UNIT_IMPERIAL);\n"
                    "map.addControl(scaleControl);\n"
                    "var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});\n"
                    "map.addControl(navControl);\n"
                    "var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});\n"
                    "map.addControl(overviewControl);}\n"
                    "function relocationByLola(lo,la,zoomlevel) {// 根据经纬度定位地点\n"
                    "map.centerAndZoom(new BMap.Point(lo,la),zoomlevel);}\n"
                    "function relocationByArea(area,zoomlevel) {// 根据查找位置定位地点\n"
                    "map.centerAndZoom(area,zoomlevel);}\n"
                    "var map;\n"
                    "initMap();\n</script>\n").arg(longitude).arg(latitude).arg(zoomLevel);
    strHtml += strJs;
    QFile file(QCoreApplication::applicationDirPath() + "/current.html");
    if (file.open(QIODevice::WriteOnly | QIODevice::Text)) {
        file.write(strHtml.toLocal8Bit());
        file.close();
    }


    mainMapView->load(QUrl(QCoreApplication::applicationDirPath() + "/current.html"));
}

void Widget::on_locationBtn_clicked()
{
    if (ui->lalaRadio->isChecked()) {
        QString strJs = QString("relocationByLola(%1,%2,%3);")
                .arg(ui->longitudeLineEdit->text())
                .arg(ui->latitudeLineEdit->text())
                .arg(ui->zoomLevelLineEdit->text());
        mainMapView->page()->runJavaScript(strJs);
    } else {
        QString strJs = QString("relocationByArea('%1',%2);")
                .arg(ui->locationLineEdit->text())
                .arg(ui->zoomLevelLineEdit->text());
        mainMapView->page()->runJavaScript(strJs);
    }
}

main.cpp

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

qq_24127015

关注

7
点赞
踩
39

收藏

觉得还不错? 一键收藏
3
评论
Qt QWebEngineView加载百度地图，根据经纬度或位置刷新

1.首先需要在百度地图开发者页面注册并获取密钥打开百度地图开发平台：http://lbsyun.baidu.com/ 登录百度账户点击控制台，打开控制台页面在控制台页面，创建应用5.白名单输入*6.提交之后就可以看到密钥了2.使用密钥获取html并显示<!DOCTYPE html><html><head> <meta name="viewport" content="initial-sacale=1.
复制链接

扫一扫