Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

iniciante99

[Resolvido] Google Maps

Recommended Posts

iniciante99

Boas pessoal.

Tenho aqui uma duvida que nao tou a conseguir desenbrulhar.

Ora bem, entao:

Eu quero fazer uma mapa em que 1º o mapa veja a minha geolocalização e que este passe a ser um ponto e que o 2º ponto o de destino sera um ponto fixo por exemplo Lisboa.

A partir desses 2 pontos executa a rota.

Estou farto de procurar pela net como o fazer e nao consigo :(

Fico a espera da vossa ajuda :D Desde ja obrigado!

Share this post


Link to post
Share on other sites
apocsantos

Boa tarde,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Trabalho de AJAX</title>

   <script src="http://www.google.com/jsapi?key=Colocar aqui uma chave válida de google maps" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript" ></script>
   <script type="text/javascript">
  function addSampleButton(caption, clickHandler)
  {
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value = caption;	
    if (btn.attachEvent)
	  btn.attachEvent('onclick', clickHandler);
    else
	  btn.addEventListener('click', clickHandler, false);
    // Adiciona um botão simples da User Interface
    document.getElementById('sample-ui').appendChild(btn);
  }
  function addSampleUIHtml(html)
  {
    document.getElementById('sample-ui').innerHTML += html;
  }
   </script>
   <script type="text/javascript">
   var ge;
   google.load("earth", "1");
   google.load("maps", "2");
   function init()
{
 google.earth.createInstance('map3d', initCallback, failureCallback);
  addSampleUIHtml(
    '<input id="location" type="text" value="Avenida do Atlantico, Viana do Castelo, Portugal"/>'
  );
  addSampleButton('Ver partir de!', buttonclick)
   }
   function initCallback(instance) {
  ge = instance;
  ge.getWindow().setVisibility(true);

  // Adiciona controlo de navegação
  ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
  // Adiciona a Layer de fronteiras e a layer de estradas
  ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
  ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
  document.getElementById('installed-plugin-version').innerHTML =
    ge.getPluginVersion().toString();
 $.getJSON("http://localhost/apocs/file.php", //ficheiro php utilizado para ler o ficheiro de texto com as moradas a codificar
	    function(data){
		    $.each(data, function(i,morada) //percorre o array de dados
   {
 addPlacemark(morada) //adiciona um marcador para a morada passada por parametro
		    });
	    });
   }
   function failureCallback(errorCode) {
   }

   function buttonclick()
{
  var geocodeLocation = document.getElementById('location').value;
  var geocoder = new google.maps.ClientGeocoder();
  geocoder.getLatLng(geocodeLocation, function(point)
  {
    if (point) {
	  var lookAt = ge.createLookAt('');
	  lookAt.set(point.y, point.x, 10, ge.ALTITUDE_RELATIVE_TO_GROUND,
				 0, 60, 20000);
	  ge.getView().setAbstractView(lookAt);
 }
  });
   }
 function addPlacemark(morada){

  var geocodeLocation = morada;
  var geocoder = new google.maps.ClientGeocoder();
  geocoder.getLatLng(geocodeLocation, function(point) {
   if (point) {
 var placemark = ge.createPlacemark('');
 placemark.setName("placemark");
 ge.getFeatures().appendChild(placemark);
 // Cria um icone para o placemark
 var icon = ge.createIcon('');
 icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
 var style = ge.createStyle('');
 style.getIconStyle().setIcon(icon);
 placemark.setStyleSelector(style);
 // Cria um ponto
 var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
 var point2 = ge.createPoint('');
 point2.setLatitude(point.y);
 point2.setLongitude(point.x);
 placemark.setGeometry(point2);
   }
 });
 }
   </script>
</head>
 <body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
   <div id="sample-ui"></div>
   <div id="map3d" style="width: 500px; height: 380px;"></div>
   <br>
   <div>Versão do Google Earth plug-in instalada: <span id="installed-plugin-version" style="font-weight: bold;">Carregando...</span></div>
 </body>
</html>

<?php
$file = fopen("enderecos.txt", "r");
$i = 1;
while (!feof($file))
{
   $limpar = str_replace(array("\n", "\r"), "", fgets($file));
   $array[$i] = $limpar;
   $i++;
}
fclose($file);
echo json_encode($array);
?>

Espero que o exemplo ajude.

Cordiais cumprimentos,

Apocsantos


"A paciência é uma das coisas que se aprendeu na era do 48k" O respeito é como a escrita de código, uma vez perdido, dificilmente se retoma o habito"

Share this post


Link to post
Share on other sites
apocsantos

Boa tarde,

O exemplo que deixei, tenho-o a funcionar perfeitamente, apenas substitui "Colocar aqui uma chave válida de google maps" pela minha chave de google maps. O ficheiro "endereços.txt" que é lido, é um ficheiro de texto com moradas, e apenas uso o PHP, para me ler o ficheiro e enviar as moradas para o HTML, num array de JSON. Por cada morada cria um place marker.

Coloca duvidas e questões em concreto.

Cordiais cumprimentos,

Apocsantos


"A paciência é uma das coisas que se aprendeu na era do 48k" O respeito é como a escrita de código, uma vez perdido, dificilmente se retoma o habito"

Share this post


Link to post
Share on other sites
iniciante99

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">


function locSucesso(position) {
 var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert (latitude+', '+longitude);
}

function erro(error) {
 alert("Falha ao localizar");
}

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize(position) {

navigator.geolocation.getCurrentPosition(locSucesso, erro);

var latlng = new google.maps.LatLng("Porto");
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
 zoom: 14,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
var marker = new google.maps.Marker({
 position: latlng,
 map: map,
 title:"My location"
});

calcRoute();
}

function calcRoute() {
var start = "Porto";
var end = "Lisboa";
var request = {
 origin:start,
 destination:end,
 travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
 if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');		
} else if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
if (status == 'ZERO_RESULTS') {
alert("Could not calculate a route to or from one of your destinations.");
} else {
alert("There was an unknown error in your request. Requeststatus: "+status);
}
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:710px; height:300px"></div>
</body>
</html>

Actualmente tenho este codigo que ele traça o caminho de Lisboa ao Porto,

E diz-me num alert que meti a aparecer as minhas coordenadas,

Ora bem o que falta executar aqui e na linha onde diz :

function calcRoute() {

var start = "Porto";

(Aqui em vez de ser estatico ele inserir as coordenadas que me mostra no alert)

É essa a duvida, nao as consigo fazer chegar la.

Obrigado pela ajuda.

Share this post


Link to post
Share on other sites
iniciante99

Não tou a conseguir passa-los por argumentos.

Se me poderes dar uns toques agradecia sff.

O utilizar nao tem de inserir nada, so permitir que o browser o localize, depois tudo e feito automaticamente.

Obrigado

Share this post


Link to post
Share on other sites
iniciante99

Obrigado pessoal, ja consegui o que pretendia :D

Podem fechar ;)

Obrigadao People ;)

Edited by iniciante99

Share this post


Link to post
Share on other sites
thoga31

Podem fechar ;)

No P@P, os tópicos não são fechados nem removidos. ;)


Knowledge is free!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.