Ariston Santos Posted November 22, 2014 Report Share Posted November 22, 2014 Olá. Pretendo criar uma função na qual eu passe um array com vários endereços e seja aberta uma página do google maps indicando a rota e um pontinho em cada endereço. Já tenho uma que mostra a rota para dois endereços (origem e destino) mas não serve para vários endereços. Alguém já fez algo parecido que possa compartilhar aqui? Desde já, agradeço. Quote Link to comment Share on other sites More sharing options...
Jmsilva Posted November 23, 2014 Report Share Posted November 23, 2014 Dê uma olhada no link, não testei...mas parece que resolve, o segredo está no vetor criado em javascript que usa o parâmetro waypoints: http://www.princiweb.com.br/blog/programacao/google-apis/google-maps-api-v3-criando-rotas-entre-multiplos-pontos.html Quote Link to comment Share on other sites More sharing options...
Jmsilva Posted November 24, 2014 Report Share Posted November 24, 2014 var directionsService, directionsRenderer;var enderDe, enderAte;directionsService = new google.maps.DirectionsService();directionsRenderer = new google.maps.DirectionsRenderer();directionsRenderer.setMap(map);/* Endereço de origem e o de destino. */enderDe = 'ALAMEDA SANTOS, 1000, SÃO PAULO - SP, 01418-9028';enderAte ='AVENIDA NAÇÕES UNIDAS, 17-17, BAURU - SP, 17013-035';/* Locais intermediários por onde a rota deve passar. */var local1, local, local3;local1 = {location:'AV. 11 DE JUNHO, 52, SÃO PAULO - SP'};local2 = {location:'RUA CEL. MURSA, 10, SÃO PAULO - SP'};local3 = {location:'RUA CAMPOS SALLES, 214, BOTUCATU - SP'};var request = {origin:endDe, destination:endPara,travelMode: google.maps.DirectionsTravelMode.DRIVING,waypoints: new Array (local1, local2, local3)}; Quote Link to comment Share on other sites More sharing options...
Jmsilva Posted November 24, 2014 Report Share Posted November 24, 2014 api completa: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Rota com multiplos pontos</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; ; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function load() { directionsDisplay = new google.maps.DirectionsRenderer(); var caragua = new google.maps.LatLng(-23.257209,-45.946624); var mapOptions = { zoom: 10, center: caragua } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var waypts = []; var checkboxArray = document.getElementById('waypoints'); for (var i = 0; i < checkboxArray.length; i++) { if (checkboxArray.options.selected == true) { waypts.push({ location:checkboxArray.value, stopover:true}); } } var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var route = response.routes[0]; var summaryPanel = document.getElementById('directions_panel'); summaryPanel.innerHTML = ''; for (var i = 0; i < route.legs.length; i++) { var routeSegment = i + 1; summaryPanel.innerHTML += '<b>Rota - Trecho: ' + routeSegment + '</b><br> de: '; summaryPanel.innerHTML += route.legs.start_address + ' ate '; summaryPanel.innerHTML += route.legs.end_address + '<br>'; summaryPanel.innerHTML += route.legs.distance.text + '<br><br>'; } } }); } google.maps.event.addDomListener(window, 'load', load); </script> </head> <body> <div id="map-canvas" style="float:left;width:70%;height:100%;"></div> <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> <div style="margin:20px;border-width:2px;"> <b>Inicio:</b> <select id="start"> <option value="caraguatatuba, sp">Caragua</option> </select> <br> <b>demais pontos - Waypoints:</b> <br> <i>(Ctrl-Click para multiplas selecao)</i> <br> <select multiple id="waypoints"> <option value="ubatuba, sp">Ubatuba, sp</option> <option value="taubate, sp">Taubate</option> <option value="santos, sp">Santos</option> <option value="sao sebastiao, sp">Sseb</option> </select> <br> <b>Fim:</b> <select id="end"> <option value="sao paulo, sp">SP</option> </select> <br> <input type="submit" onclick="calcRoute();"> </div> <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
kapiaba Posted November 24, 2014 Report Share Posted November 24, 2014 Veja se ajuda: http://forums.fivetechsupport.com/viewtopic.php?f=6&t=9565&p=45986&hilit=new+google.maps.Map#p45986 http://forums.fivetechsupport.com/viewtopic.php?f=3&t=9183&p=156413&hilit=maps.DirectionsService#p156413 http://www.xharbour.com/xhc/index.asp?page=xhc_download_detail.asp&type=dl&id=146&action=download&show_i=7&show_sub=1 http://forums.fivetechsupport.com/viewtopic.php?f=3&t=9183&hilit=maps+directionsservice&start=75 abs. Quote Link to comment Share on other sites More sharing options...
Ariston Santos Posted November 26, 2014 Author Report Share Posted November 26, 2014 Resolveu. Muito obrigado. Theotokos 1 Quote Link to comment Share on other sites More sharing options...
marcioe Posted November 26, 2014 Report Share Posted November 26, 2014 posta pra galera como voce fez Theotokos 1 Quote Link to comment Share on other sites More sharing options...
Ariston Santos Posted November 30, 2014 Author Report Share Posted November 30, 2014 Desculpem pela demora na resposta. Usei o exemplo postado acima pelo Jmsilva Apenas substitui os endereços pelos que preciso e acrescentei mais. Quote Link to comment Share on other sites More sharing options...
kapiaba Posted December 1, 2014 Report Share Posted December 1, 2014 Desculpem pela demora na resposta. Usei o exemplo postado acima pelo Jmsilva Apenas substitui os endereços pelos que preciso e acrescentei mais. Ariston, agora quem não ententeu fui eu, como ficaria isso em fivewin? Pode mostrar via código? Obg. abs. Quote Link to comment Share on other sites More sharing options...
Theotokos Posted March 25, 2017 Report Share Posted March 25, 2017 Meu caro @Ariston Santos vc pode compartilhar conosco a rotina em FiveWin? o @wanderso está precisando tmb... Vlw Muito Obgdão!!! Fkem com Deus... Quote Link to comment Share on other sites More sharing options...
Ariston Santos Posted March 25, 2017 Author Report Share Posted March 25, 2017 * Atualmente está assim a minha função para mostrar a rota entre dois endereços. STATIC FUNCTION Show_Way(End_Clie, Nmr_Clie, Cid_Clie, Est_Clie) If !IsInternet() Msgalert("não conectado a internet.", "Aviso!") ; Return nil Endif cOrigem := Alltrim(mEnd)+", "+Alltrim(mNmr)+", "+Alltrim(c_Emun)+", "+Alltrim(c_EUF) cDestino := Alltrim(End_Clie)+", "+Alltrim(Nmr_Clie)+", "+Alltrim(Cid_Clie)+", "+ALLTRIM(Est_Clie) Ferase(CurDrive()+":\"+CurDir()+"\tempgmapdist.html") // uRegPath:= "c:\test" cHtml := MemoRead(CurDrive()+":\"+CurDir()+"\modelos\rotanet.html") cHtml := StrTran( cHtml, "<<ORIGEM>>", cOrigem) cHtml := StrTran( cHtml, "<<DESTINO>>", cDestino) IF FileWrite(CurDrive()+":\"+CurDir()+"\tempgmapdist.html", cHtml ) WAITRUN( GetEnv( "ComSpec" )+" /C START "+CurDrive()+":\"+CurDir()+"\tempgmapdist.html", 0 ) ENDIF RETURN NIL Conteúdo do HTML <html><head><title>Mapa com rota</title> <script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=pt-BR'></script> <script type='text/javascript'> var map, geocoder; var mapDisplay, directionsService; function initialize() { var myOptions = {zoom: 15,mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); geocoder = new google.maps.Geocoder(); var enderDe = "ORIGEM"; var enderAte = "DESTINO"; geocoder.geocode( { 'address': enderAte, 'region' : 'BR'},trataLocs); initializeDirections (); calcRota (enderDe, enderAte); } function initializeDirections () { directionsService = new google.maps.DirectionsService(); mapDisplay = new google.maps.DirectionsRenderer(); mapDisplay.setMap(map); mapDisplay.setPanel(document.getElementById("panel")) } function calcRota(endDe, endPara) { var request = { origin:endDe, destination:endPara, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { mapDisplay.setDirections(response) } }) } function trataLocs (results, status) { var elem = document.getElementById('msg'); if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); if (results.length > 1) { var i, txt = '<select style="font-family:Verdana;font-size:8pt;width=550px;" onchange="mostraEnd(this.options[this.selectedIndex].text);">'; elem.innerHTML = 'O endereço exato não foi localizado - há ' + results.length.toString() + ' resultados aproximados.<br />'; for (i = 0; i < results.length; i++) { txt = txt + '<option value="' + i.toString() + '"'; if (i == 0) { txt = txt + ' selected="selected"'; txt = txt + '>' + results[i].formatted_address + '</option>'; } } txt = txt + '</select>' elem.innerHTML = elem.innerHTML + txt; } } else elem.innerHTML = 'Erro no tratamento do endereço :<br /><b>' + status + '</b>'; } </script> </head> <body onload='initialize();' style='font-family:Verdana;font-size:8pt;margin:5px 0 5px 0;'> <center> <div id='map_canvas' style='width:800px;height:450px'></div> <div id='panel' style='width:550px;height:450px'></div> </center> </html> Não tenho outra, apenas esta. Theotokos 1 Quote Link to comment Share on other sites More sharing options...
Theotokos Posted March 25, 2017 Report Share Posted March 25, 2017 Ah Sim! Vlw!!! Essa é que eu tenho tmb... Obgdao! Quote Link to comment Share on other sites More sharing options...
PJINFO Posted April 11, 2017 Report Share Posted April 11, 2017 Desta forma eu uso e funciona bem local msearch := alltrim(upper(ENDERECO))+" "+ALLTRIM(NUMERO)+" "+ alltrim(upper(CIDADE))+" "+; alltrim(upper(UF)) WebEXE3("https://www.google.com.br/maps/place/" + MSEARCH) //CARREGA A PAGINA USANDO O CHROME *---------------------------------------------------- Function WebExe3(cLink) // visualiza e navega na pagina *---------------------------------------------------- default cLink:="http://www.google.com" clink:=GetEnv( "ComSpec" )+" /C START "+STRTRAN(cLink," ","+") WAITRUN(cLink, 0 ) RETURN Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.