Geolocalização

ricardo.pinhanelli · Abril 11, 2013

Bom dia galera, sou novo por aqui e estou precisando de uma ajuda no desenvolvimento de um script PHP para fazer o rastreamento de geolocalização. Estou nesse problema fazem 2 dias e não consegui nada...rs

Uma observação, em todos os métodos que encontrei, o mais preciso é via API do HTML5. Consegui um javascript bem simples que não envia nenhuma mensagem ao browser do rastreamento.

<body onload="ExibirLocalizacao()">

<div id="geoarea"></div>

<script type="text/javascript">

var area = document.getElementById("geoarea");

function ExibirLocalizacao(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(ObterPosicao); }

else{ area.innerHTML = "Sem suporte geolocalização."; } }

function ObterPosicao(posicao){ area.innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude; }

</script>

Esse script fornece os valores exatos de latitude e longitude, porém quero armazenar esses dados em uma base MySQL. Preciso converter essa informação em variáveis.

Minha pergunta é, existe alguma forma de escrever esse script em PHP ao invés de Javascript e separar esses dados em 2 variáveis: $latitude e $longitude

Gostaria de usar esse script em um formulário de contato, assim quando a pessoa enviar uma mensagem consigo fazer seu rastreamento. Ex:

<form action="scripts.php" method="post" enctype="multipart/form-data" name="cadastro" id="cadastro" onSubmit="return submitit_contato()">

<input type="hidden" name="latitude" value="<? print $latitude; ?>" />

<input type="hidden" name="longitude" value="<? print $longitude?>" />

Outro problema, é o seguinte. Após a postagem desse formulário de contato... vou gravar as informações em uma base MySQL. Quando abrir esse registro, vou informar esses dados de localização e criar o mapa via GoogleMaps.

Abaixo também há um modelo que consegui muito simples para inserir as variáveis. $latitude e $longitude.

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

<script type="text/javascript"

src="http://maps.googleapis.com/maps/api/js?key={KEY}&sensor=true">

</script>

<script type="text/javascript">

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(<? print $latitude; ?>, <? print $longitude; ?>),

zoom: 17,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>

Tudo funciona perfeito, porém no mapa não existe um marcador indicando a posição exata. Seria legal isso aparecer mais não faço nem ideia de como colocar... preciso muito de ajuda para concluir esse script.

Bem pessoal, tenho um conhecimento limitado em PHP... acredito que consegui passar a ideia principal do que gostaria de fazer... se alguém estiver disposto a entrar nessa empreitada ou até uma pequena consultoria. Gostaria muito de concluir essa ideia. Obrigado!

Bruno Augusto · Abril 11, 2013

Até onde eu sei, não, porque isso é uma característica do browser.

O que você pode fazer, porém, é obter o IP do visitante e checar em uma base de dados como a da MaxMind que, talvez, ainda seja gratuito.

ricardo.pinhanelli · Abril 11, 2013

Bruno, tudo bem... o problema em fazer o rastreamento por IP é a precisão... por exemplo: estou em Santa Bárbara, via IP o rastreamento aponta Sorocaba. Outro teste na cidade de Americana, aponta Mogi-Mirim.

Usar essas ferramentas via IP como: maxmind, geoplugin, jquery... em nenhuma a precisão da posição passou perto. Encontrei algumas referencias de AJAX convertendo as variáveis do Javascript em post, mais não consegui fazer funcionar. Continuo pesquisando e tentando resolver como montar esse script.

Se mais alguém quiser contribuir agradeço muito, como disse antes é muito importante finalizar esse script de rastreamento, se algum freelance quiser encarar o desafio vamos conversar!

Obrigado!

William Bruno · Abril 11, 2013

fazer oque vc quer é apenas isso aqui:

vou dar um id para facilitar a busca no DOM:

<input type="hidden" name="latitude" value="" id="lt" />
<input type="hidden" name="longitude" value="" id="lg" />

function ObterPosicao(posicao){ 
   document.getElementById('lt').value = posicao.coords.latitude;
   document.getElementById('lg').value = posicao.coords.longitude;

   area.innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude;
}

pronto. Escrevi nos hiddens com javascript. Simples assim.

Pegar a geo com php não tem como, mas já que vc tem o form, dá para escrever no form.

ricardo.pinhanelli · Abril 11, 2013

Boa tarde William, tudo bem... fiz um teste aqui e não deu certo... me acompanha, alterei o Javascript como sugeriu...

<script type="text/javascript">

var area = document.getElementById("geoarea");

function ExibirLocalizacao(){

if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(ObterPosicao); }

else{ area.innerHTML = "Sem suporte geolocalização."; } }

function ObterPosicao(posicao){

document.getElementById('lt').value = posicao.coords.latitude;

document.getElementById('lg').value = posicao.coords.longitude;

area.innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude;

}

</script>

Coloquei o comando para chamar a função: <body onLoad="ExibirLocalizacao()">

e coloquei os campos no formulário.

<input type="hidden" name="latitude" value="" id="lt" />

<input type="hidden" name="longitude" value="" id="lg" />

Porém no formulário, não estou recebendo nenhum valor... os dados das coordenadas continua id="lt" e id="lg" com o value"" vazio. Ou seja não consigo postar os dados para meu banco de dados. Me desculpe se cometi algum erro ou não consegui entender direito sua solução, o problema ainda continua...

Obrigado!

William Bruno · Abril 11, 2013

aperte Ctrl+Shift+J no teu firefox e veja se aparece algum erro no console de erros.

ricardo.pinhanelli · Abril 11, 2013

William, o único erro que aparece é...

TypeError: area is null

Linha 106

William Bruno · Abril 11, 2013

troque isso:

   area.innerHTML = ..

por:

   document.getElementById("geoarea").innerHTML = ..

alguns erros são bloqueantes, e travam o resto da execução do script.

ricardo.pinhanelli · Abril 11, 2013

Nada ainda... erro:

TypeError:document.getElementById(...) is null

<script type="text/javascript">

var area = document.getElementById("geoarea");

function ExibirLocalizacao(){

if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(ObterPosicao); }

else{ document.getElementById("geoarea").area.innerHTML = "Sem suporte geolocalização."; } }

function ObterPosicao(posicao){

document.getElementById('lt').value = posicao.coords.latitude;

document.getElementById('lg').value = posicao.coords.longitude;

document.getElementById("geoarea").area.innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude;

}

</script>

William Bruno · Abril 11, 2013

não cara.. presta atenção no meu codigo.

  document.getElementById("geoarea").innerHTML

e não

  document.getElementById("geoarea").area.innerHTML

ricardo.pinhanelli · Abril 11, 2013

Foi mal...rs, mais o mesmo erro continua aparecendo e as variáveis estão vazias...

<input type="hidden" name="latitude" value="" id="lt" />

<input type="hidden" name="longitude" value="" id="lg" />

<script type="text/javascript">

var area = document.getElementById("geoarea");

function ExibirLocalizacao(){

if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(ObterPosicao); }

else{ document.getElementById("geoarea").innerHTML = "Sem suporte geolocalização."; } }

function ObterPosicao(posicao){

document.getElementById('lt').value = posicao.coords.latitude;

document.getElementById('lg').value = posicao.coords.longitude;

document.getElementById("geoarea").innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude;

}

</script>

William Bruno · Abril 11, 2013

como vc está tentando verificar o valor delas ?

lembre-se q estamos trabalhando com javascript, então vc não vai conseguir ler elas visualizando o código fonte.

ricardo.pinhanelli · Abril 12, 2013

William, está tudo funcionando 100%.... valeu muito pela ajuda, abaixo vou colocar o código completo.

<body onLoad="ExibirLocalizacao()">

<form action="arquivo.php" method="post" enctype="multipart/form-data" name="form" id="form">
<input type="hidden" name="latitude" value="" id="lt" />
<input type="hidden" name="longitude" value="" id="lg" />

<script type="text/javascript">
var area = document.getElementById("geoarea");
function ExibirLocalizacao(){ 
if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(ObterPosicao); }
else{ document.getElementById("geoarea").innerHTML = "Sem suporte geolocalização."; } }
function ObterPosicao(posicao){ 
   document.getElementById('lt').value = posicao.coords.latitude;
   document.getElementById('lg').value = posicao.coords.longitude;
   document.getElementById("geoarea").innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude;
}
</script>

marcosmy · Agosto 15, 2013

Ricardo,

Sou novo no php, tentei copiar mas não deu certo, vc poderia postar o "arquivo.php" tbm?

Obs.: ficou faltando o API do google que inclui no inicio dentro do body mas nao deu certo:

Obrigado

Diovani Mangia · Outubro 4, 2013

Muito interessante o post. Ricardo

Ricardo,

Sou novo no php, tentei copiar mas não deu certo, vc poderia postar o "arquivo.php" tbm?

Obs.: ficou faltando o API do google que inclui no inicio dentro do body mas nao deu certo:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

Obrigado

Eu fiz o seguinte, eu fechei o form do código acima e coloquei um botão e ficou dessa forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Documento sem título</title>

</head>

</form>

var area = document.getElementById("geoarea");

function ExibirLocalizacao(){

if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(ObterPosicao); }

else{ document.getElementById("geoarea").innerHTML = "Sem suporte geolocalização."; } }

function ObterPosicao(posicao){

document.getElementById('lt').value = posicao.coords.latitude;

document.getElementById('lg').value = posicao.coords.longitude;

document.getElementById("geoarea").innerHTML = "Latitude: " + posicao.coords.latitude + "<br /> Longitude: " + posicao.coords.longitude;

}

</script>

</body>

</html>

o arquivo.php recebe os valores em post ficando assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Documento sem título</title>

</head>

<?php

$longitude = $_POST["longitude"];

$latitude = $_POST["latitude"];

echo 'Longitude = ' .$longitude;

echo '<p>';

echo 'Latidude = ' .$latitude;

?>

<body>

</body>

</html>

E o resultado exibido foi :

Longitude = -45.0448455

Latidude = -22.120332599999998

só não sei ainda dar seguimento, pois também estou iniciando em php.

e muito grato a todos

Diovani Mangia · Outubro 4, 2013

Eu dei uma pesquisada e consegui achar a localização no google maps.

Enviando um header com as variáveis em post para o link da google ela mostra a localização.
Para controlar o zoom do mapa é só alterar o ultimo número da variável post, que aqui no caso é o &z=6.

No arquivo.php substitua o código php por este:

<?php
$longitude = $_POST["longitude"];
$latitude = $_POST["latitude"];
$link = "http://maps.google.com/?ie=UTF8&ll=" .$latitude . "," .$longitude . "&spn=0.004846,0.009624&z=6";
header('Location:' .$link);
?>

daí dá certinho.

Agora gostaria de saber, como a google retornaria o nome da cidade?
Se alguém puder me ajudar.

Arquivado

Geolocalização

Recommended Posts

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ricardo.pinhanelli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcosmy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diovani Mangia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diovani Mangia 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante