本篇博文主要實現了:
（1）根據Qt中指定的中心點加載一副百度地圖；
（2）單擊目標點進行畫圓；
（3）手動制定圓的半徑進行畫圓；
（4）獲取目標點的經度和緯度，返回給Qt
最終效果：
（1）根據指定中心點加載一副地圖
1)新建一個窗體工程，繼承自QMainWindow。
用Qt界面設計器打開界面文件，在界面上託入QWebView控件，這時運行會出現錯誤，錯誤如下：
......... undefined reference to `QWebView::load(QUrl const&)' .........
...........................................................................
原因是沒有在其工程文件.pro中加入所需的webkitwidgets，注意Qt5之前的版本是webkit。加入結果如下：
#-------------------------------------------------
#
# Project created by QtCreator 2014-01-15T15:26:50
#
#-------------------------------------------------
QT += core gui
QT += webkitwidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
TARGET = gps_googlemap
TEMPLATE = app
SOURCES += main.cpp\
mainwindow.cpp
HEADERS += mainwindow.h
FORMS += mainwindow.ui
在加載百度地圖API進行操作之前，需要在百度地圖API中註冊一個開發者帳號，獲取密鑰進行開發，具體註冊方法見地圖API官網
My WebPage(顯示的是我的整個的網頁源碼，顯示根據指定的中心點顯示百度地圖的源碼爲紅色部分):
<!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;}
</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");
var m_city = "北京";
map.centerAndZoom(m_city, 13); // 初始化地圖,設置中心點座標和地圖級別
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
map.enableScrollWheelZoom(); //啓用滾輪放大縮小
var m_radius = 1000;
var m_point;
map.addEventListener("click",function(e){ //單擊目標點進行畫圓
var circle = new BMap.Circle(e.point,m_radius);
map.clearOverlays();
map.addOverlay(circle);
m_point = e.point;
alert(e.point.lng + "," + e.point.lat);
});
function SetCity(city){ //設置城市js函數
m_city = city;
}
setTimeout(function(){ //500ms後設置中心點爲m_city
}, 500);
function SetRadius(radius){ //設置半徑
m_radius = radius;
}
function AutoSetCircle(){ //根據設置的半徑重新畫圓
var circle2 = new BMap.Circle(m_point,m_radius);
map.clearOverlays();
map.addOverlay(circle2);
}
function ReturnLngLat(){//返回目標中心點的經度和緯度
LngLat[0] = m_point.lng;
LngLat[1] = m_point.lat;
return LngLat;
}
</script>
My Qt Code:
注：需在Qt界面編輯器中爲QwebView控件加入loadFinished(bool arg1)信號
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
m_nRadius = 1000; //默認畫圓半徑
m_strCity = "南陽"; //Qt中更改的顯示中心點，網頁中默認顯示的北京
QUrl url("file:///home/lizuqing/Code/QtCode/gps_googlemap/mymap.html");
ui->webView->setUrl(url); //加載網頁
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::on_webView_loadFinished(bool)
{
QWebFrame *frame = ui->webView->page()->mainFrame();
QString method = QString("SetCity(\"%1\")").arg(m_strCity);//調用js的SetCity進行目標城市設置
}
此上，已經完成根據指定中心點顯示百度地圖的功能
（2）單擊目標點進行畫圓；
此功能的實現主要是在網頁源碼中實現的：
map.addEventListener("click",function(e){ //單擊目標點進行畫圓
var circle = new BMap.Circle(e.point,m_radius);
map.clearOverlays();
map.addOverlay(circle);
m_point = e.point;
alert(e.point.lng + "," + e.point.lat);
});
（3）手動制定圓的半徑進行畫圓；
WebPage:
function SetRadius(radius){ //設置半徑
m_radius = radius;
}
function AutoSetCircle(){ //根據設置的半徑重新畫圓
var circle2 = new BMap.Circle(m_point,m_radius);
map.clearOverlays();
map.addOverlay(circle2);
}
在界面中託入一個文本框和一個按鈕，對按鈕綁定click信號，在click中寫入處理代碼：
void MainWindow::on_pushButton_clicked()
{
QString strLineText = ui->lineEdit->displayText();
m_nRadius = strLineText.toInt();
QWebFrame *frame = ui->webView->page()->mainFrame();
QString method = QString("SetRadius(\"%1\")").arg(m_nRadius); //調用js的SetRadius進行半徑設置
frame->evaluateJavaScript(method);
if(m_nRadius != 1000)
{
frame->evaluateJavaScript("AutoSetCircle()"); //調用js的AutoSetCircle利用新半徑重新畫圓
}
}
（4）獲取目標點的經度和緯度，返回給Qt
WebPge:
function ReturnLngLat(){ //返回目標中心點的經度和緯度
LngLat[0] = m_point.lng;
LngLat[1] = m_point.lat;
return LngLat;
}
Qt Code:
void MainWindow::on_pushButton_2_clicked()
{
QWebFrame *frame = ui->webView->page()->mainFrame();
QVariant var = frame->evaluateJavaScript("ReturnLngLat()"); //調用js的ReturnLngLat返回目標點的經度和維度
QStringList strList = var.toStringList(); //var中保存的是目標點的經度和維度
int i;
for(i=0; i<strList.count(); i++)
{
QMessageBox::information(NULL, QObject::tr("Lng&Lat"), strList.at(i));
}
}
Thank you for reading！
----2014.01.16 By lzq NY