QT调用Google map通过webkit在线显示地图
2014-01-08 11:42
295 查看
QT调用Google map通过webkit在线显示地图
改原理只是通过QT的webkit类，来显示Google map，然后通过JavaScript脚本将经纬度通过地图的标志（小红点）来显示当前的位置。不过想通过这个来实现定位误差还是比较大的。因为这个不能真正的算是调用Google的API进行定位。
具体工作比较简单主要是要找到JavaScript的Demo，网上很多资料。
代码如下：
pro文件
#--------------------- # # Project created by QtCreator 2013-04-01T21:07:40 # #-------------------------------------------------
QT += core gui
QT += webkit
TARGET = gps_googlemap
TEMPLATE = app
SOURCES += main.cpp\ mainwindow.cpp
HEADERS += mainwindow.h
FORMS += mainwindow.ui
mainwindow.h文件
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
//#include <QWebKit>
#include <QWebView>
#include <QFile>
#include <QMessageBox>
#include <QTextStream>
#include <QWebFrame>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void on_webView_loadFinished(boo
4000
l arg1);
private:
Ui::MainWindow *ui;
// QWebView *view ;
QString buf;//接收经度纬度
QString s_longitude;//经度
QString s_latitude;//纬度
};
#endif // MAINWINDOW_H
mainwindow.cpp文件
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
s_longitude = "23.2706716";
s_latitude = "113.2931106";
/////////////////////////////////////////////////////////////////////////
QFile file("/home/fengbo/test/windows_qt/gps_googlemap/google.html");//读取文件内容
if (! file.open(QIODevice::ReadOnly)){//进行判断
QMessageBox::information(NULL, QObject::tr("Unable to open file"),
file.errorString());
}
////////设置网页载入////////////////////////////////
ui->webView->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
ui->webView->settings()->setAttribute(QWebSettings::JavascriptEnabled, true);
ui->webView->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
ui->webView->settings()->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
ui->webView->settings()->setAttribute(QWebSettings::JavaEnabled, true);
QTextStream out(&file);
QString output_file = out.readAll();
ui->webView->setHtml(output_file);//显示网页内容
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_webView_loadFinished(bool arg1)//webview的槽函数
{
QWebFrame *qframe = ui->webView->page()->mainFrame();
float longitude = s_longitude.toFloat();
float latitude = s_latitude.toFloat();
buf = QString("Open(%1, %2, %3);").arg(longitude).arg(latitude).arg(QString("\"center\""));
qframe->evaluateJavaScript(buf);
ui->label->setText(s_longitude);
ui->label_2->setText(s_latitude);
}
main.cpp文件
#include <QtGui/QApplication>
#include "mainwindow.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
下面就是Google map的网页即将网址保存为HTML文件然后通过Qt进行读取HTML文件的内容，并通过webview来显示。
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 myOptions = {
zoom: 8,
center: new google.maps.LatLng(23.271016, 113.295088),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
<
961d
span style="font-family:SimSun;font-size:14px;">myOptions);
Open(x,y,"center");
}
function Open (x,y, text)
{
var myLatlng = new google.maps.LatLng(x,y);
map.setCenter (myLatlng, 15);
var marker = new google.maps.Marker({
position: myLatlng,
title:text
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
就可以显示下面的图片了，不过要注意要在pro文件里确定要将webkit添加进出，要不然调用编译时webview会出现错误。
转载地址：http://xfb2020.blog.163.com/blog/static/19849611220133253533697/
改原理只是通过QT的webkit类，来显示Google map，然后通过JavaScript脚本将经纬度通过地图的标志（小红点）来显示当前的位置。不过想通过这个来实现定位误差还是比较大的。因为这个不能真正的算是调用Google的API进行定位。
具体工作比较简单主要是要找到JavaScript的Demo，网上很多资料。
代码如下：
pro文件
#--------------------- # # Project created by QtCreator 2013-04-01T21:07:40 # #-------------------------------------------------
QT += core gui
QT += webkit
TARGET = gps_googlemap
TEMPLATE = app
SOURCES += main.cpp\ mainwindow.cpp
HEADERS += mainwindow.h
FORMS += mainwindow.ui
mainwindow.h文件
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
//#include <QWebKit>
#include <QWebView>
#include <QFile>
#include <QMessageBox>
#include <QTextStream>
#include <QWebFrame>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void on_webView_loadFinished(boo
4000
l arg1);
private:
Ui::MainWindow *ui;
// QWebView *view ;
QString buf;//接收经度纬度
QString s_longitude;//经度
QString s_latitude;//纬度
};
#endif // MAINWINDOW_H
mainwindow.cpp文件
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
s_longitude = "23.2706716";
s_latitude = "113.2931106";
/////////////////////////////////////////////////////////////////////////
QFile file("/home/fengbo/test/windows_qt/gps_googlemap/google.html");//读取文件内容
if (! file.open(QIODevice::ReadOnly)){//进行判断
QMessageBox::information(NULL, QObject::tr("Unable to open file"),
file.errorString());
}
////////设置网页载入////////////////////////////////
ui->webView->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
ui->webView->settings()->setAttribute(QWebSettings::JavascriptEnabled, true);
ui->webView->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
ui->webView->settings()->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
ui->webView->settings()->setAttribute(QWebSettings::JavaEnabled, true);
QTextStream out(&file);
QString output_file = out.readAll();
ui->webView->setHtml(output_file);//显示网页内容
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_webView_loadFinished(bool arg1)//webview的槽函数
{
QWebFrame *qframe = ui->webView->page()->mainFrame();
float longitude = s_longitude.toFloat();
float latitude = s_latitude.toFloat();
buf = QString("Open(%1, %2, %3);").arg(longitude).arg(latitude).arg(QString("\"center\""));
qframe->evaluateJavaScript(buf);
ui->label->setText(s_longitude);
ui->label_2->setText(s_latitude);
}
main.cpp文件
#include <QtGui/QApplication>
#include "mainwindow.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
下面就是Google map的网页即将网址保存为HTML文件然后通过Qt进行读取HTML文件的内容，并通过webview来显示。
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 myOptions = {
zoom: 8,
center: new google.maps.LatLng(23.271016, 113.295088),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
<
961d
span style="font-family:SimSun;font-size:14px;">myOptions);
Open(x,y,"center");
}
function Open (x,y, text)
{
var myLatlng = new google.maps.LatLng(x,y);
map.setCenter (myLatlng, 15);
var marker = new google.maps.Marker({
position: myLatlng,
title:text
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
就可以显示下面的图片了，不过要注意要在pro文件里确定要将webkit添加进出，要不然调用编译时webview会出现错误。
转载地址：http://xfb2020.blog.163.com/blog/static/19849611220133253533697/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Google Map开发（一） ASP.NET中调用Google Map API实现简单的地图显示
- iphone--通过 Google Map 显示地图和乘车信息的方法
- ios通过google map显示地图和乘车信息
- Android 调用系统地图（Google Map）并显示具体方位
- PHP连接mysql数据库，调用Google Map显示不同地方地图信息，使用Javascript弹出悬浮信息窗口展示。
- Google Map开发（一） ASP.NET中调用Google Map API实现简单的地图显示
- 【android基础】之Android 调用系统地图（Google Map）并显示具体方位
- ios通过google map显示地图和乘车信息
- 通过 Google Map 显示地图和乘车信息的方法
- 通过 Google Map 显示地图和乘车信息的方法
- Android 调用系统地图（Google Map）并显示具体方位
- 通过 Google Map 显示地图和乘车信息的方法
- 显示当前日期和时间（通过调用System.currentTimeMills ()方法）
- qt显示通过opencv显示摄像头
- Android用户定位Google Map显示地图
- Qt通过QToolTip显示浮动信息
- 【Bing Map学习系列】(2)——如何通过Bing Maps Silverlight Control显示地图
- OpenLayers调用天地图在线服务
- ArcGIS API for JS v4.6 调用Esri在线地图和图层例子（2D和3D）
- 通过url调用边度地图的地理和反地理编码