Ir para o conteúdo
iniciante99

[Resolvido] Google Maps

Mensagens Recomendadas

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!

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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"

assinatura.jpg

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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"

assinatura.jpg

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
iniciante99

Obrigado pessoal, ja consegui o que pretendia :D

Podem fechar ;)

Obrigadao People ;)

Editado por iniciante99

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.