Jump to content

Google maps java web


sabing
 Share

Recommended Posts

Bom dia eu estou com um pequeno problema eu estou querendo traçar rota entre vários ponto no google maps mais não tenho noção

exemplo tenho ponta A,B,C,D,E,F,G a rota tem que percorrer em ordem de A - B - C - D - E - F- G, imagina que esses ponto é uma parada e de cada ponto ele da uma continuidade. eu fiz o google maps marcar vários pontos mais eu queria interligar esses pontos em ordem crescente

Link to comment
Share on other sites

Olá eu estou fazendo a lógica pois eu estou ainda com problemas não consigo fazer ele contornar o ponto c e adiante veja o codigo

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-15168843-1']); _gaq.push(['_setDomainName', '.feopt.com.br']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script>

<script type="text/javascript">

var directionDisplay;

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

var route = false;

var map;

var marker;

var geocoder;

function initialize() {

directionsDisplay = new google.maps.DirectionsRenderer();

geocoder = new google.maps.Geocoder();

var myLatlng = new google.maps.LatLng(-23.5489433, -46.6388182);

var myOptions = {

zoom: 17,

center: myLatlng,

mapTypeControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

map = new google.maps.Map(document.getElementById("mapa"), myOptions);

directionsDisplay.setMap(map);

}

function calcRoute() {

if (marker) marker.setMap(null);

route = true;

var start = document.getElementById("LatitudePontoA").value+","+document.getElementById("LongitudePontoA").value;

var end = document.getElementById("LatitudePontoB").value+","+document.getElementById("LogitudePontoB").value;

var waypts = [];

$('.waypoints').each(function() {

waypts.push({

location: $(this).val(),

stopover:true});

}

);

var request = {

origin:start, destination:end,waypoints: waypts,optimizeWaypoints: false,travelMode: google.maps.DirectionsTravelMode.DRIVING

};

directionsService.route(request, function(response, status)

{

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

} else {

alert("Erro: " + status);

}

});

}

function revRoute(){

var divStart = document.getElementById("LatitudePontoA").value+","+document.getElementById("LongitudePontoA").value;

var divEnd = document.getElementById("LatitudePontoB").value+","+document.getElementById("LogitudePontoB").value;

var start = divStart.value;

var end = divEnd.value;

divStart.value = end;

divEnd.value = start;

if(route == true){

calcRoute();

}

}

var numberInput = 0;

function addInput(){

$("#moreInput").append('<div id="div'+ numberInput +'"> <input type="text" name="LatitudePontoA'+ numberInput +'" id="LatitudePontoA'+ numberInput +'" value="" /> <br></br> <input type="text" name="LongitudePontoA'+ numberInput +'" id="LongitudePontoA'+ numberInput +'" value="" /> <input type="button" onclick="javascript:removeInput(\'div'+numberInput+'\');" value="Remover"; /> <br />');

numberInput++;

}

function removeInput(removeInput){

$("#"+removeInput).remove();

}

</script>

</head>

<body onload="initialize()">

<div>

<div>

<div>

<div>

<form onsubmit="calcRoute();return false;" id="myForm" >

<input type="text" value="Digite a latitude do PONTO A" id="LatitudePontoA"/>

<br></br>

<input type="text" value="Digite a longitude do PONTO A" id="LongitudePontoA" />

<br></br>

<input type="text" value="Digite a latitude do PONTO B" id="LatitudePontoB"/>

<br></br>

<input type="text" value="Digite a longitude do PONTO B" id="LogitudePontoB"/>

<br></br>

<div id="moreInput"></div>

<br></br>

<input type="button" value="Adicionar" onclick="addInput();">

<input type="submit" value="Calcular" />

</form>

</div>

</div>

<br />

<br />

<div id="mapa" style="width:940px; height: 500px;"></div>

<br />

<br />

</div>

</div>

</body>

</html>

Link to comment
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
 Share

×
×
  • Create New...

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.