目录
前期准备
百度离线地图api获取
主要参考:
https://blog.csdn.net/geekxm/article/details/14227139
可直接下载下面的资源,把里面的瓦片地图替换成自己的地图瓦片即可直接用:
https://download.csdn.net/download/xx970829/20669042?spm=1001.2014.3001.5501
地图瓦片下载工具
网上有挺多资源,不想麻烦的可下载如下资源,破解版全能电子地图下载器3.0,免安装:https://download.csdn.net/download/xx970829/20669119
qt与js交互工具qwebchannel.js下载
qt与js交互需要qwebchannel工具,这个文件直接在qt安装目录可直接找到:
将其文件拷贝到js文件夹下:
pro设置
在pro中加 :
QT += webenginewidgets
这个模块需要在安装qt时手动勾选。
程序源码
baidu.html
百度地图开放平台示例中心:
https://lbsyun.baidu.com/jsdemo.htm#uWalkNavPanel
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO</title>
<script src="js/apiv1.3.min.js"></script>
<script src="js/qwebchannel.js"></script> <!-- 与qt交互 -->
<!--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="width:500px;height:300px;border:1px solid gray" id="container"></div>
</body>
<!--div style="width:100%;height:100%;border:1px solid gray;position:absolute;" id="container"></div -->
</html>
<script type="text/javascript">
var tileLayer = new BMap.TileLayer({
isTransparentPng: true
});
tileLayer.getTilesUrl = function (tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
return 'maptile/' + zoom + '/' + x + '/' + y + '.png';
}
var map = new BMap.Map('container');
var point = new BMap.Point(126.58516,45.712676) //创建点坐标
// map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
map.addTileLayer(tileLayer);
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(126.58516,45.712676), 15);
// ----- control -----
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.enableKeyboard(); //启用键盘操作,默认禁用。键盘的上、下、左、右键可连续移动地图。
map.enableContinuousZoom();//启用连续缩放效果
//map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
//map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: true})); //缩略图控件
// map.addEventListener('click', function (e) { //点击位置经纬度
// alert('点击位置经纬度:' + e.latlng.lng + ',' + e.latlng.lat);
// });
//---------------------------------------------------------------
var copyCtrl = new BMap.CopyrightControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
})
map.addControl(copyCtrl);
// qt交互注册
new QWebChannel(qt.webChannelTransport,
function(channel){
window.MainWindow = channel.objects.MainWindow; // 注册
}
);
//=================== JS中的函数 ============================================================
// 创建小车图标
var myIcon = new BMap.Icon("images/plane.ico", new BMap.Size(52, 26));
function myMarker(lng,lat){
allMarker=map.getOverlays(); //保存所有标注
var newpoint=new BMap.Point(lng,lat);
var newmarker = new BMap.Marker(newpoint,{
icon: myIcon
}); // 创建标注
map.addOverlay(newmarker);
}
//=================== QT中的函数 =============================================================
//将经纬度传回qt
var updateInfo_click = function(lng,lat)
{
MainWindow.getCoordinate_click(lng,lat); //getCoordinate_click为qt槽函数
}
var updateInfo_mousemove = function(lng,lat)
{
MainWindow.getCoordinate_mousemove(lng,lat);
}
//js监控经纬度
map.addEventListener("click",function(e) { //点击
updateInfo_click(e.point.lng,e.point.lat);
});
map.addEventListener("mousemove",function(e) { //鼠标移动
updateInfo_mousemove(e.point.lng,e.point.lat);
});
</script>
桥接类bridge
自己定义的一个类,便于qt与js间的交互
bridge.h
#ifndef BRIDGE_H
#define BRIDGE_H
#include<QObject>
class bridge : public QObject
{
Q_OBJECT
public:
bridge();
signals:
void sendData_click(QString lon,QString lat); //发送信号
void sendData_mousemove(QString str);
public slots:
void getCoordinate_click(QString lon,QString lat);
void getCoordinate_mousemove(QString lon,QString lat);
};
#endif // BRIDGE_H
bridge.cpp
#include "bridge.h"
#include<QDebug>
bridge::bridge()
{
}
void bridge::getCoordinate_click(QString lon, QString lat)
{
// QString str=QString("%1,%2").arg(lon).arg(lat);
//qDebug()<<str; //获取鼠标点击位置的地图坐标
emit sendData_click(lon,lat); //发送信号
}
void bridge::getCoordinate_mousemove(QString lon, QString lat)
{
QString str=QString("%1,%2").arg(lon).arg(lat);
//qDebug()<<str; //获取鼠标点击位置的地图坐标
emit sendData_mousemove(str);//发送信号
}
主程序
代码中解释比较详细
main.cpp
#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include "bridge.h"
#include<QWebEngineView>
#include<QWebChannel>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
void resizeEvent(QResizeEvent *);
private slots:
void on_pushButton_clicked();
void receiveData_click(QString lon,QString lat); //接收信号
void receiveData_mousemove(QString str);
private:
Ui::MainWindow *ui;
QWebEngineView *mainMapView;
bridge *mybride;
// QWebView* m_pWebView; // QWebView对象
};
#endif // MAINWINDOW_H
mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QWebChannel>
#include<QDebug>
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);
// ui->widget_2->setParent(this);
mainMapView = new QWebEngineView(ui->widget_2);//ui->widget_2
//mainMapView->load(QUrl("file:///home/xx/qt/qt_baidu/baidu.html"));//baidumap.html
//mainMapView->resize(1,1);
//mainMapView->show();
bridge *mybride=new bridge(); //创建通道对象用于与JS交互
QWebChannel *channel=new QWebChannel(ui->widget_2);
channel->registerObject(QString("MainWindow"),(QObject*)mybride); // QWebChannel对Widget类,注册一个MainWindow的通信介质
mainMapView->page()->setWebChannel(channel);
mainMapView->page()->load(QUrl("file:///home/xx/qt/qt_baidu/baidu.html"));
//关联信号和槽函数
connect(mybride,&bridge::sendData_click, this, &MainWindow::receiveData_click);
connect(mybride,&bridge::sendData_mousemove, this, &MainWindow::receiveData_mousemove);
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::resizeEvent(QResizeEvent *)
{
mainMapView->resize(this->size());
}
void MainWindow::on_pushButton_clicked()
{
//QString cmd="generate_track()";
QString cmd=QString("myMarker(%1,%2)").arg(ui->lineEdit->text()).arg(ui->lineEdit_2->text());
mainMapView->page()->runJavaScript(cmd);
}
void MainWindow::receiveData_click(QString lon,QString lat)
{
ui->lineEdit->setText(lon);
ui->lineEdit_2->setText(lat);
}
void MainWindow::receiveData_mousemove(QString str)
{
//qDebug()<<str;
ui->label->setText(str);
}
界面搭建
提升QWebEngView
将widget控件提升为QWebEngView:
添加其他控件
新建一个widget,将提升的控件放入其中:用于限制网页范围
新建一个2个lineEdit:用于显示鼠标点击处的显示经度和纬度
新建一个按钮:用于在2个lineEdit的经纬处加载自己的ico图标
新建一个label:用于显示鼠标所在位置的经度和纬度
效果演示
鼠标移动处的经纬度
鼠标点击处的经纬度
指定经纬处加载ico图标
【读者可参考】:https://blog.csdn.net/qq_43569273/article/details/88122422
https://blog.csdn.net/tujiaw/article/details/51649031