×
Namespaces

Variants
Actions

Como mostrar localizações em um mapa usando a API do Google Maps em uma aplicação Qt para JavaScript

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Compatibilidade
Plataforma(s):
Symbian

Artigo
Tradução:
Por flaviofabricioferreira
Última alteração feita por lpvalente em 10 Mar 2013

Neste post, eu irei apresentar uma aplicação que mostra a localização de alguns mapas usando QWebKit e a API do Google Maps.

Showmap1.png

Contents

Criando a Interface

Antes de inciarmos a aplicação em si, nós precisamos criar a interface gráfica da aplicação . Qt oferece uma forte ferramenta chamada Qt Designer para construir interfaces gráficas. A Nossa interface contém cinco botões (QPushButton) e uma tela de web (QWebView). Você pode adicionar novos componentes dentro da interface usando o arrasta e solta (Drag and Dropping) para dentro do Widget. As propriedades como nome e etiqueta (label) dos componentes podem ser trocados através do editor de propriedades que fica a direita na tela principal do Qt Designer.

Implementação

Primeiro, nós podemos implementar um QWebView customizado. Neste exemplo ele é chamado de Map por ser usado para mostrar mapas. A implementação central do Map é implementado pelo metodo geocode. Este método requisita as coordenadas do local dado, usando a API do Google Maps.

void Map::geoCode(QString local)
{
QUrl geoCodeUrl("http://maps.google.com/maps/geo");
geoCodeUrl.addQueryItem("q", local);
geoCodeUrl.addQueryItem("output", "csv");
geoCodeUrl.addQueryItem("key", "GOOGLE_MAPS_KEY");
manager->get( QNetworkRequest(geoCodeUrl) );
}

O Retorno do método geocode é recebido pelo método replyFinished. Esse retorno é um array que contém as coordenadas(latitude e longitude) de um determinado local. Depois disso o signal reloadMap é emitido.

void Map::replyFinished(QNetworkReply *reply)
{
QString replyStr( reply->readAll() );
QStringList coordinateStrList = replyStr.split(",");
 
if( coordinateStrList.size() == 4)
{
QPointF coordinate( coordinateStrList[2].toFloat(),
coordinateStrList[3].toFloat() );
coordinates << coordinate;
}
emit reloadMap();
}

O signal reloadMap é conectado ao slot loadCoordinates fazendo com que quando o signal reloadMap for emitido o slot loadCoordinates seja invocado. O método loadCoordinates usa as capacidades do componente QtWebKit para chamar o metodo em Javascript Open que é definido no HTML aberto pelo componente Map.

void Map::loadCoordinates()
{
foreach(QPointF point ,coordinates)
{
this->page()->mainFrame()->evaluateJavaScript(
QString("Open(%1,%2)").arg(point.x()).arg(point.y()) );
}
}

O HTML possui código JavaScript para mostrar as localizações usando a API do Google Maps. A função initialize cria um objeto GMap2 com ponto central em (0,0) e nível de zoom 1. Devido a isso o mapa mundial é mostrado por inteiro. O método Open atualiza o ponto central do GMap2 usando or argumentos recebidos e com o nível de zoom igual a 13, o que dá um certo foco ao local.

var map;
 
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.setCenter( new GLatLng(0,0),1 );
}
}
 
function Open(x,y)
{
map.setCenter( new GLatLng(x,y),13 );
}

A nossa aplicação usa o componente Map para mostrar o mapa com as localizações que desejamos. Por exemplo, quando o botão 1 é clicado, o método geoCode é invocado passando Campina Grande como a cidade que deve ser mostrada.

void MainScreen::on_button1_clicked()
{
map->clearCoordinates();
map->geoCode("Campina Grande");
}

Compilando

Para compilar nossa aplicação, nós precisamos incluir as seguintes linhas em nosso arquivo de projeto Qt (.pro). Estas linhas fazem com que nosso projeto possua as bibliotecas dos módulos Network,XML e WebKit.

QT += network \
xml\
webkit

Depois disso, nós podemos compilar nossa aplicação usando o ScratchBox para o alvo ARM execuntando os seguintes comandos:

qmake –project
qmake showmapARM.pro
make

Executando

As Capturas de Tela abaixo mostram nossa aplicação em execução:

This page was last modified on 10 March 2013, at 16:24.
152 page views in the last 30 days.
×