×
Namespaces

Variants
Actions
Revision as of 04:16, 11 October 2012 by hamishwillee (Talk | contribs)

Como mostrar a localização de cidades, em um mapa, usando Qt e a API Google Maps, para Maemo

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

Compatibilidade
Plataforma(s):
Symbian

Artigo
Criado por valderind4 em 13 Sep 2009
Última alteração feita por hamishwillee em 11 Oct 2012

Neste artigo, eu apresentarei uma aplicação que mostra a localização de algumas cidades, através do uso do QWebKit e da API Google Maps.

Showmap1.png

Pré-requisitos


Projetando:

Antes de inicar uma implementação real, nós precisamos construir a GUI(Inteface gráfico do usuaŕio) da aplicação. Qt oferece uma ferramenta poderosa, chamada Qt Designer, a qual se presta à criação de GUIs. Neste exemplo, nós usamos o Qt Designer para criar o form da aplicação. Tal formSuch a form contém cinco botões(QPushButton) e um visualizador web(QWebView). Você pode adicionar um novo componente Qt dentro de um form, arrastando e soltando elementos da caixa de widget. As propriedade como nome e rótulo(label) do componente Qt pode ser mudada, por meio do editor de propriedades.

Implementando: Note que o uso deste código livre quebra os termos e condições da API Google Maps (secção 10.8). Você deve comprar uma licença empresarial se você deseja usar a API Google Maps como mostrado neste exemplo.

Primeiro, nós devemos implementar um componente QWebView personalizado. Neste exemplo, chamado Map, tal componente tem alguns serviços adicionais, que permitem-nos mostrar a localização de cidades em uma mapa usando a API Google Maps. O principal serviço do component Map é implementado pelo método geoCode. O método geoCode requisita as coordenadas do determinado local, através da API Google Maps.

void Map::geoCode(QString local)
{
QString requestStr(tr("http://maps.google.com/maps/geo?q=%1&output=%2&key=%3")
.arg(local)
.arg("csv")
.arg("GOOGLE_MAPS_KEY") );
manager->get( QNetworkRequest(requestStr) );
}

A resposta do método geoCode é recebida pelo método replyFinished. Tal método analisa e armazena as coordenadas(latitude e longitude) em um array de coordenadas. Depois que o sinal de 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 sinal do reloadMap é conectado ao slot do loadCoordinates slot. Deste modo, quando o sinal reloadMap é emitido, o slot de loadCoordinates é invocado. O método loadCoordinates usa a capacidade do QtWebKit’spara chamar o método do JavaScript Open, que é definido em HTML e carregado em componet do Map.

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

Assim, HTML tem o código JavaScript, para mostrar a localização da cidade, usando a API Google Maps. A função initialize function cria um GMap2 com o ponto central em (0, 0) e nível de zoom em 1. Deste modo, o globo é mostrado completamente no mapa. A função Open atualiza o ponto central do GMap2 para os argumentos passados como parâmetros e nível de zoom em 13.

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 );
}

The MainScreen uses the Map component to show the map with the city locations. For example: when the button1 is clicked, the geoCode method is invoked passing Campina Grande as the city to be shown.

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

Compilando:

Na hora de compilar a nossa aplicação, nós precisamos incluir as seguinte linhas em nosso arquivo de projeto Qt. Cada linha habilita o módulo Qt necessário para nossa aplicação.


QT += network \
xml\
webkit

Depois que, nós compilamos nossa aplicação usando o multi-compilador Scratchbox para processador ARM pelos seguintes comando:

qmake –project
//then add the lines described above using a text editor(vi or gedit)
qmake showmapARM.pro
make

Executando:

A captura de tela abaixo mostra nossa aplicação em execução:

Showmap2.png

Showmap3.png

84 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×