注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

linux 学习

 
 
 

日志

 
 

Qt下QWebKit与JavaScript的交互  

2011-10-15 08:31:27|  分类: QT编程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

最近传感层的GPS传感器已经调试OK。那么将GPS信号表现出来是接下来要考虑的事情,所以今天想在Qt平台下使用Google Map API进行定位。

我最终的目的是在Map中画一个点,这个点的经纬度就是GPS传感器采集的经纬度。之前从来没有接触过Google Map API,于是我先到官网看了些样例。首先我用Qt的QWebKit加载了一个网页试了一下,没有任何问题。代码如下:

QWebView view = new QWebView(this);
view->load(QUrl("http://www.baidu.com"));
view->show();

接着我就用同样的模式加载了goole地图,但是接下来怎么将GPS信息显示在地图中我是一点思路都没有。后来在google map的一些demo中找到一个html的demo,demo的内容如下

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

上面这个html的内容就可以加载goole地图了,更多的demo连接为:http://code.google.com/apis/maps/documentation/javascript/examples/index.html

到目前为止,我需要在页面中添加一个标志点,于是我修改上面的代码,并且成功添加了点,修改后的代码如下

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;

function initialize()
{
var CenterLatlng = new google.maps.LatLng(32.03396,117.750373);

var myOptions = {
zoom: 15,
center: CenterLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Open(32.03396,117.750373,"center");
}

function Open (x,y, text)
{
var myLatlng = new google.maps.LatLng(x,y);
map.setCenter (myLatlng, 15);

var marker2 = new google.maps.Marker({
position: myLatlng,
title:text
});
marker2.setMap(map);

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>

上面的代码就可以在地图中加入一个标志点了。到这里,我唯一要解决的就是如何在地图中动态的加入一个标志点。要动态添加,那么Qt程序一定要和上面 的程序发生交互。于是我在网上搜了半天,知道了Qt调用Js的函数的方法。但是我试了好多方法都没有成功让Qt调用Js的函数。最后终于发现自己的错误 了,要能够让Qt调用Js的函数,首先Js的函数已经被加载才行。因为我这个程序本省要加载Google Map,所以加载的时间比较长,正好QWebKit提供了loadFinished这个SIGNAL,我尝试让loadFinished返回TRUE的时 候再去调用Js的函数,这下成功了。到此已经可以正常加载Google Map,并且可以根据GPS信息去动态添加标志点了。下面是Qt的主要程序

maps.h

#ifndef MAPS_H
#define MAPS_H
#include <QWebView>

#include <QtGui/QMainWindow>
#include "ui_maps.h"

class maps : public QMainWindow
{
Q_OBJECT

public:
maps(QWidget *parent = 0, Qt::WFlags flags = 0);
~maps();

public slots:
void finished(bool);

private:
Ui::mapsClass ui;
QWebView *view;
};

#endif // MAPS_H

maps.cpp

#include "maps.h"
#include "QGoogleMapView.h"
#include <QFile>
#include <QTextStream>
#include <QIODevice>
#include <QWebDatabase>
#include <QWebSecurityOrigin>
#include <QWebFrame>

maps::maps(QWidget *parent, Qt::WFlags flags)
: QMainWindow(parent, flags)
{
ui.setupUi(this);

view = new QWebView(this);
view->setGeometry(0, 0, 800, 800);
QString content = "";
QFile file("maps.html");
if (file.open(QIODevice::ReadOnly))
{
QTextStream stream(&file);
content = stream.readAll();
}

connect(view, SIGNAL(loadFinished(bool)), this, SLOT(finished(bool)));

view->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
view->settings()->setAttribute(QWebSettings::JavascriptEnabled, true);
view->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
view->settings()->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
view->settings()->setAttribute(QWebSettings::JavaEnabled, true);
view->setHtml(content);

view->show();
}

void maps::finished(bool)
{
QWebFrame *frame = view->page()->mainFrame();
QString cmd = QString("Open(%1, %2, %3);").arg(32.034019).arg(118.750572).arg(QString("\"center\""));
frame->evaluateJavaScript(cmd);
}

maps::~maps()
{

}

程序运行图片如下

image

  评论这张
 
阅读(8829)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018