Qt加载百度地图和谷歌地图

Qt中加载网页,需要用到这个QWebView这个类,就可以将网页加载出来。

首先,使用Qt时,现在Qt的*.pro文件中加上这一句QT   +=  webkit


然后需要包含这个头文件

#include <QtWebKitWidgets/QWebView>

需要链接Qt5WebKitWidgetsd.libQt5WebKitWidgets.lib这个库,前面的是debug版,后面的是release版,这里面需要去链接下,否则地图加载不出来。

加载网页或者地图就三步:第一步:先实例化一个QWebView(view)对象(也可以直接在ui中选取),

第二步:然后使用view.load(QUrl("你的网页地址")));

第三步:调用show(view.show());

就可以将网页加载出来了。

具体来看代码的实现:

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include "config.h"
#include <QFileInfo>
#include <QtWebKitWidgets/QWebView>
#include <QWebSettings>

#if _DEBUG
#pragma comment(lib,"Qt5WebKitWidgetsd.lib")
#else
#pragma comment(lib,"Qt5WebKitWidgets.lib")
#endif

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    QString qstrmaptype = Config().Get("map","map_type").toString();
    QString qstrurl;
    QString qstrfilepath;
    if(qstrmaptype == "google")
    {
        qstrfilepath = QFileInfo("./googlemap.html").absoluteFilePath();
    }
    else if(qstrmaptype == "baidu")
    {
        qstrfilepath = QFileInfo("./baidumap.html").absoluteFilePath();
    }

    qstrurl = QString("file:///%1").arg(qstrfilepath);
    ui->webView->load(QUrl(qstrurl));
    ui->webView->show();
}

Widget::~Widget()
{
    delete ui;
}
上面的代码是通过配置文件来选取加载哪个地图,可以是谷歌和百度。只需要修改配置文件即可,配置文件部分,可以看我的 Qt读写配置文件之QSettings的用法这里不细说了。

baidumap.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">body, html,#allmap {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=你的百度地图密钥"></script>
	<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");     // 创建Map实例
map.centerAndZoom(new BMap.Point(121.442293,31.195045), 11);  // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.setCurrentCity("上海");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

googlemap.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="Stylesheet" href="menu.css" type="text/css" />
    <script src="http://maps.google.cn/maps/api/js?key=你的google的key" type="text/javascript"></script>
	<script src="http://maps.google.cn/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
    <script type="text/javascript" src="menu_function.js" charset="utf-8"></script>
    <style type="text/css">
        #map{ 
		width: 100%; 
		height: 100%; 
		position: absolute; 
		bottom: 0; 
		left: 0; 
		right: 0; 
		top: 0;}
	</style>
	<style type="text/css">
		html {height:100%}
		body {height:100%;margin:0;padding:0}
		#googleMap {height:100%}
	</style>
<script>
function initialize()
{
    var mapProp = {
        center:new google.maps.LatLng(31.195045, 121.442293),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
 
<body>
<div id="googleMap" style="width:100%;height:100%;"></div>

 
</body>
</html>

地图加载的效果图;

百度地图:


google地图加载效果图:



资源链接地址:点击打开链接

欢迎大家加我的群:460952208

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值