qt4.8.5使用webkit加载百度离线地图

最新推荐文章于 2020-08-18 17:02:22 发布

缘客_ql

最新推荐文章于 2020-08-18 17:02:22 发布

阅读量2.7k

点赞数 4

分类专栏： QT 文章标签： qt webkit 百度地图api1.3

本文链接：https://blog.csdn.net/u014213012/article/details/84385516

版权

QT 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

环境:

qt：4.8.5

system:ubuntu12.04

一百度离线地图API

自己制作百度地图离线JavaScript API

1.首先获取百度 JavaScript API

首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 如下图所示

其中 http://api.map.baidu.com/getscript?v=1.3&ak=&services=&t=20181030064438这个链接就是我们要找的API文件，

同样在浏览器中打开它，并另存为诸如“apiv1.3.min.js”

2.获取css文件

其中http://api.map.baidu.com/res/13/bmap.css这个链接就是我们要找的css文件，在浏览器打开他。并另存为"bmp.css"

3.js和css格式化工具

JS/HTML/CSS格式化：http://tool.chinaz.com/tools/jsformat.aspx）

4.存放格式可以参考文末提供的源码

二. 百度离线瓦片地图

1.瓦片地图介绍

百度地图是由一张张正方形瓦片组成，在拖动地图时，只加载可视范围内的瓦片。如下图所示，每个方格代表一个瓦片，这样就可以通过访问百度瓦片地图服务器下载瓦片地图。。

2.制作瓦片地图(全能电子地图下载器)

2.1使用源码包里面的install/DiTuXiaZaiQi371015.zip解压安装,未破解(我的是xp)

2.2安装完成界面如下

3.加载瓦片地图

将下载的地图放在百度离线API指定的目录下，当然这个目录是可以通过API的源码更改的。我使用的目录是maptile(卫星地图)和maptile_(街道地图)。这样通过html引用百度离线API时，地图就显示出来了

三. qt调用百度离线瓦片地图

效果如图

四部分源码

map.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图API1.3</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css"/>
</head>
<body>
<div style="left:0;top:0;width:100%;height:100%;position:absolute;" id="container"></div>
</body>
</html>
<script type="text/javascript">
var mapOptions={
                minZoom: 3,
                maxZoom:19,
                mapType:  BMAP_NORMAL_MAP
              }
var map = new BMap.Map("container",mapOptions);      // 设置街道图为底图
//var point = new BMap.Point(116.468278, 39.922965);   // 创建点坐标
var point = new BMap.Point(120.072528, 30.328262);     //更改为自己创建的瓦片地图的经纬度
map.centerAndZoom(point,15);                         // 初始化地图,设置中心点坐标和地图级别。

//map.addControl(new BMap.MapTypeControl());
//map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, isOpen: true})); //缩略图控件
map.addControl(new BMap.NavigationControl({offset: new BMap.Size(10, 90)}));
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。
map.enableContinuousZoom();                   // 启用连续缩放
//map.setCurrentCity("杭州");
var myIcon = new BMap.Icon("images/Point.png", new BMap.Size(20,25));
var marker = new BMap.Marker(point,{icon:myIcon});   // 创建标注
map.addOverlay(marker);                              // 加载标注
//marker.enableDragging();

var dragFlag=false;
function showAddress(longjitude,latitude)
{
   var gpsPoint = new BMap.Point(longjitude, latitude);

   if(!dragFlag)
   {
     map.panTo(gpsPoint);
   }
   marker.setPosition(gpsPoint);
}


function showStreetMap()
{
   map.setMapType(BMAP_NORMAL_MAP);
};
function showSatelliteMap()
{
   map.setMapType(BMAP_SATELLITE_MAP);
}
map.addEventListener("mousemove",function(e)
{
  qtwebkit.getCoordinate(e.point.lng,e.point.lat); //qtwebkit qt注册的对象

 });

map.addEventListener("dragstart",function(e){
   dragFlag=true;

 });

map.addEventListener("dragend",function(e){
   dragFlag=false;

 });

map.addEventListener("zoomend",function(e){

 });

</script>

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QModelIndex>
#include <QUrl>

namespace Ui {
class MainWindow;
}
class QWebView;
class QLineEdit;
class QListWidget;

class MainWindow : public QMainWindow
{
    Q_OBJECT
    
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
public slots:
    void getCoordinate(const QString &longitude, const QString &latitude);
private slots:
    void changeLocation();
    void loadStarted();
    void setProgress(int);
    void adjustTitle();
    void finishLoading(bool);
    void changeIcon();
    void showHistory();
    void gotoHistory(QModelIndex);
    void urlChanged(QUrl);
    void findText();

    void on_pbStreet_clicked();
    void on_pbMap_clicked();
protected slots:
    void onBtnCallJsClicked();
    void slotPopulateJavaScriptWindowObject();
protected:
    void paintEvent(QPaintEvent *);
private:
    Ui::MainWindow *ui;
    QWebView *mainWebView;
    QLineEdit *mainLineEdit;
    QListWidget *historyList;
    int progress;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QWebView>
#include <QLineEdit>
#include <QWebHistory>
#include <QListWidget>
#include <QDebug>
#include <QWebFrame>
#include <QDir>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow),progress(0)
{
    ui->setupUi(this);
    mainWebView = new QWebView(this);
    mainWebView->setParent(ui->webframe);
    resize(1024, 600);

    mainWebView->settings()->setIconDatabasePath("./");

    connect(mainWebView, SIGNAL(iconChanged()), this, SLOT(changeIcon()));
    connect(mainWebView, SIGNAL(loadStarted()), this, SLOT(loadStarted()));
    connect(mainWebView, SIGNAL(loadProgress(int)), this, SLOT(setProgress(int)));
    connect(mainWebView, SIGNAL(titleChanged(QString)), this, SLOT(adjustTitle()));
    connect(mainWebView, SIGNAL(loadFinished(bool)), this, SLOT(finishLoading(bool)));
    connect(mainWebView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(slotPopulateJavaScriptWindowObject()));

    mainLineEdit = new QLineEdit(this);
    connect(mainLineEdit, SIGNAL(returnPressed()), this, SLOT(changeLocation()));

    ui->mainToolBar->addAction(mainWebView->pageAction(QWebPage::Back));
    ui->mainToolBar->addAction(mainWebView->pageAction(QWebPage::Forward));
    ui->mainToolBar->addAction(mainWebView->pageAction(QWebPage::Reload));
    ui->mainToolBar->addAction(mainWebView->pageAction(QWebPage::Stop));
    ui->mainToolBar->addAction(tr("查找"), this, SLOT(findText()));
    ui->mainToolBar->addWidget(mainLineEdit);
    ui->mainToolBar->addAction(tr("历史"), this, SLOT(showHistory()));

    mainLineEdit->setText("http://www.baidu.com");

    ///把源码目录下的baidu文件夹复制到可执行程序目录下
    QString htmlPth ="file://";
    htmlPth += qApp->applicationDirPath()+"/baidu/map.html";
    //mainWebView->setUrl(QUrl("file:///home/yangtq/qtSet/qtexampleset/qtcretorstudycode/webkit/baidu/map.html"));
    mainWebView->load(QUrl(htmlPth));

    historyList = new QListWidget;
    historyList->setWindowTitle(tr("历史记录"));
    historyList->setMinimumWidth(300);
    connect(historyList, SIGNAL(clicked(QModelIndex)), this, SLOT(gotoHistory(QModelIndex)));

    mainWebView->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);
    connect(mainWebView, SIGNAL(linkClicked(QUrl)), this, SLOT(urlChanged(QUrl)));

    connect(ui->pbCallJs, SIGNAL(clicked()), this, SLOT(onBtnCallJsClicked()));

    ui->pbMap->setEnabled(true);
    ui->pbStreet->setEnabled(false);
}

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

/*!
 * \brief MainWindow::getCoordinate
 * js地图返回的经纬度
 * \param longitude
 * 经度
 * \param latitude
 * 纬度
 */
void MainWindow::getCoordinate(const QString &longitude, const QString &latitude)
{
    ui->leMouseLongitude->setText(longitude);
    ui->leMouseLatitude->setText(latitude);
}

/*!
 * \brief MainWindow::changeLocation
 * 改变网址跳转
 */
void MainWindow::changeLocation()
{ 
    QUrl url = QUrl(mainLineEdit->text());
    mainWebView->load(url);
    mainWebView->setFocus();
}

void MainWindow::loadStarted()
{
    qDebug()<<"start:"<<mainWebView->title()<<endl;
}

void MainWindow::setProgress(int p)
{
    progress = p;
    adjustTitle();
}
/*!
 * \brief MainWindow::adjustTitle
 * 加载网页标题显示
 */
void MainWindow::adjustTitle()
{
    if( progress <= 0 || progress >= 100 )
    {
        setWindowTitle(mainWebView->title());
    }
    else
    {
        ui->statusBar->showMessage(QString("%1 (%2%)").arg(mainWebView->title()).arg(progress));
        setWindowTitle(QString("%1 (%2%)").arg(mainWebView->title()).arg(progress));
    }
}

void MainWindow::finishLoading(bool finished)
{
    if( finished )
    {
        progress = 100;
        setWindowTitle(mainWebView->title());
        ui->statusBar->showMessage(QString("%1").arg(mainWebView->title()));
    }
    else
    {
        setWindowTitle("web page loading error");
    }
}
/*!
 * \brief MainWindow::changeIcon
 * 显示网页logo
 */
void MainWindow::changeIcon()
{
    setWindowIcon(mainWebView->icon());
}
/*!
 * \brief MainWindow::showHistory
 * 加载历史纪录列表
 */
void MainWindow::showHistory()
{
    QList<QWebHistoryItem> list;
    list = mainWebView->history()->items();
    historyList->clear();
    foreach (QWebHistoryItem item, list) {
        QListWidgetItem *history = new QListWidgetItem(item.icon(), item.title());
        historyList->addItem(history);
    }
    historyList->show();
}
/*!
 * \brief MainWindow::gotoHistory
 * 跳转制定的历史记录url
 * \param index
 */
void MainWindow::gotoHistory(QModelIndex index)
{
    mainWebView->load(QUrl(mainWebView->history()->itemAt(index.row()).url()));
}

void MainWindow::urlChanged(QUrl url)
{
    mainWebView->load(url);
}
/*!
 * \brief MainWindow::findText
 * 网页搜索文本高亮显示
 */
void MainWindow::findText()
{
    mainWebView->page()->findText(mainLineEdit->text(), QWebPage::HighlightAllOccurrences);
}
/*!
 * \brief MainWindow::onBtnCallJsClicked
 * qt调用js方法
 */
void MainWindow::onBtnCallJsClicked()
{
    QString strVal = QString("showAddress(\"%1\",\"%2\");").arg(ui->leLongitude->text()).arg(ui->leLatitude->text() );
    mainWebView->page()->mainFrame()->evaluateJavaScript(strVal);

}
/*!
 * \brief MainWindow::slotPopulateJavaScriptWindowObject
 * qt注册js对象对应baidu/map.html/line58-62
 * map.addEventListener("mousemove",function(e)
{
  qtwebkit.getCoordinate(e.point.lng,e.point.lat);

 });
 */
void MainWindow::slotPopulateJavaScriptWindowObject()
{
    mainWebView->page()->mainFrame()->addToJavaScriptWindowObject("qtwebkit", this);
}

void MainWindow::paintEvent(QPaintEvent *)
{
    if(ui->leLongitude->text().isEmpty() || ui->leLatitude->text().isEmpty())
    {
        ui->pbCallJs->setEnabled(false);
    }
    else
    {
        ui->pbCallJs->setEnabled(true);
    }

}
/*!
 * \brief MainWindow::on_pbStreet_clicked
 * 显示街道图
 */
void MainWindow::on_pbStreet_clicked()
{
    QString strVal = QString("showStreetMap();");
    mainWebView->page()->mainFrame()->evaluateJavaScript(strVal);
    ui->pbMap->setEnabled(true);
    ui->pbStreet->setEnabled(false);
}
/*!
 * \brief MainWindow::on_pbMap_clicked
 * 显示卫星图
 */
void MainWindow::on_pbMap_clicked()
{
    QString strVal = QString("showSatelliteMap();");
    mainWebView->page()->mainFrame()->evaluateJavaScript(strVal);
    ui->pbStreet->setEnabled(true);
    ui->pbMap->setEnabled(false);
}

源码+jsapi+全能电子地图下载器+地图资源 (https://download.csdn.net/download/u014213012/10802932)

五参考

http://www.cnblogs.com/i-gps/archive/2012/11/28/2791826.html (百度地图离线化（API v=1.3）)

https://blog.csdn.net/caoshangpa/article/details/51015483 (Qt加载百度离线地图)

https://blog.csdn.net/jwq2011/article/details/53674125 (GPS数据包格式+数据解析)

https://blog.csdn.net/caoshangpa/article/details/51014690 (Qt WebKit与JavaScript交互)

http://lbsyun.baidu.com/jsdemo.htm#subway0_0 (百度地图api)

https://www.cnblogs.com/sigma0/p/7220334.html (北斗定位)

http://blog.sina.com.cn/s/blog_7d0e2a110102v1o1.html (gps定位Qt界面百度地图api的介绍)

缘客_ql

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
qt4.8.5使用webkit加载百度离线地图

环境:qt：4.8.5system:ubuntu12.04一百度离线地图API自己制作百度地图离线JavaScript API1.首先获取百度 JavaScript API首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 如下图所示其中 http://api.map.baidu.com/getscript?v=1.3&amp;...
复制链接

扫一扫