在Qt中加载百度地图需要用到网络浏览器,在此采用webEngine
模块,然后用webchannel进行qt与HTML/JavaScript的交互。
需求描述:软件加载百度地图,用鼠标在地图上选点,并进行标号,每次加1,最后连成一条路径,为后期工作做准备。
百度地图API应用
- 采用百度离线地图API2.1版本,网上均可以下载到,然后放到项目debug文件夹下
- 瓦片地图下载,可以采用全能地图下载器,下载好后放到指定文件夹
- 复制其中一个demo文件,根据自己需要的功能进行添加
地图展示
var map = new BMap.Map("map_demo",mapOptions); // 设置街道图为底图
var point = new BMap.Point(120.393751, 36.065743); // 创建点坐标
map.centerAndZoom(point,13); // 初始化地图,设置中心点坐标和地图级别
鼠标点击标记加序号
用addEventListener("click",function(e))
对点击事件进行监听,参数e
会返回当前点的地理位置,然后在此处用Marker
添加标记,在实现每次标记加1时,因为标记本身是一个图片,因此可以考虑对标记加标签(定义一个全局的i
,每点击一次加1),然后调整下位置(为了美观),背景设置为透明,基本就可以实现所要的效果。标签的颜色和背景可以使用Label
类下的setStyle
方法设置:
label.setStyle({
color:"white",
backgroundColor:"0",
border:"0";
fontsize:"13px"
});
生成轨迹
创建一个全局空数组,在上一步中监听点击事件,参数e
返回位置点,将此点push
到数组中,在生成轨迹时将数组序列直接传入Polyline
,然后map.addOverlay(polyline)
即可加载标签。
具体的类和方法参见百度地图JavaScript API 2.0和示例Demo
Qt与html交互
地图全屏显示
用wenEngine全屏显示地图时的代码:
//mainwidow中的函数
view=new QWebEngineView(this);
view->load(url);
view->show();
添加:
void MainWindow::resizeEvent(QResizeEvent *)
{
view->resize(this->size());
}
地图在一个 widget
中显示
在UI设计界面,我的qt5.9版本是找不到wenEngineView
组件的,解决方法:在ui设计页面,拖入widgets
控件,然后提升为QWebengineView
,如图所示:
在mainwindow函数中进行webengine初始化:
QWebEnginePage *page=new QWebEnginePage(this);
QWebChannel *channel=new QWebChannel(this);
page->load(url);
page->setWebChannel(channel);
ui->webEngine->setPage(page);
新版的Qt摒弃了webkit,采用webengine,在交互上简单了很多,例如生成路径
按钮的槽函数:
void MainWindow::on_generatetrack_clicked()
{
QString cmd="generate_track()";
ui->webengine->page()->runJavaScript(cmd);
}
其中generate_track()
为html文件中的函数,只需要一条语句即可实现交互。
最终效果如图: