Ir para conteúdo
helkton

calcular distancia googleMaps

Recommended Posts

iai galera como calcular rota, alguem pode me dar uma luz, calcular distancia entre dois pontos

vou pegar o cadastro do cliente x o cadastro do estabelecimento

ai preciso calcular a distancia entre o cliente x estabelecimento

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

<script>
var p1 = new google.maps.LatLng(-20.783562, -51.747614);
var p2 = new google.maps.LatLng(-20.775710, -51.685601);

//calculates distance between two points in km's
function calcDistance(p1, p2) {
  //return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);

var distance = (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);


}
//alert(calcDistance(p1, p2));

</script>

<input type="text" id="distancia">

to com esse codigo aqui, ele joga a distancia em um alert

como jogo ele em um input pra depois poder trabalhar ele

Compartilhar este post


Link para o post
Compartilhar em outros sites

Use querySelector
 

document.querySelector("#distancia").value = calcDistance(p1, p2);

 


<input type="text" id="distancia">

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

<script>
var p1 = new google.maps.LatLng(-20.783562, -51.747614);
var p2 = new google.maps.LatLng(-20.775710, -51.685601);

//calculates distance between two points in km's
function calcDistance(p1, p2) {
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

document.querySelector("#distancia").value = calcDistance(p1, p2);

</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por houseofzuera
      Bom dia a todos.
       
      Eu preciso gerar uma rota pela Google Maps. Eu peguei o exemplo do Google Developer e entendi bem o mecanismo, porém preciso fazer algumas alterações;
       
      1 - Preciso fazer com que o "gatilho", da geração da rota seja gerado imediatamente quando o html é aberto na tela. Então eu preciso configurar isso em um evento "onShow" ou em algum equivalente, mas não sei como fazer em Javascript.
       
      2 - Eu vou integrar com o Delphi, então as variáveis virão de lá. Mas pra efeito de testes, eu vou passar umas constantes mesmo. Então, evidentemente não terá o select e o "document.getElementById", terá que funcionar de uma forma fixa. Como fazer isso?
       
      Abaixo estou postado o fonte do Google Developer. Alguém pode me dar sugestões de como adaptá-lo para a minha necessidade?
       
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Directions service</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } </style> </head> <body> <div id="floating-panel"> <b>Start: </b> <select id="start"> <option value="sorocaba, sp">Sorocaba</option> <option value="itu, sp">Itu</option> <option value="barueri, sp">Barueri</option> <option value="são paulo, sp">São Paulo</option> </select> <b>End: </b> <select id="end"> <option value="sorocaba, sp">Sorocaba</option> <option value="itu, sp">Itu</option> <option value="barueri, sp">Barueri</option> <option value="são paulo, sp">São Paulo</option> </select> </div> <div id="map"></div> <script> function initMap() { var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: {lat: 41.85, lng: -87.65} }); directionsDisplay.setMap(map); var onChangeHandler = function() { calculateAndDisplayRoute(directionsService, directionsDisplay); }; document.getElementById('start').addEventListener('change', onChangeHandler); document.getElementById('end').addEventListener('change', onChangeHandler); } function calculateAndDisplayRoute(directionsService, directionsDisplay) { directionsService.route({ origin: document.getElementById('start').value, waypoints: [{location: 'Rodoviária, Campinas'}, {location: 'Moisés Lucarelli, Campinas'}], destination: document.getElementById('end').value, travelMode: 'DRIVING' }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&callback=initMap"> </script> </body> </html>  
       
    • Por Rogério Nascimento
      Primeira mente eu gostaria de pedir desculpa se eventualmente eu  estiver postando na área errada sou novo aqui e pegarei o jeito logo logo.
       
      estou desenvolvendo uma aplicação web que possibilita o cadastro do cliente bem como seu endereço e estou em busca de uma solução para na pagina que mostra os dados do cliente selecionado abrir um mapa com a localização de seu endereço a partir dos dados de endereço que tenho registrado no bando de dados.
       
      alguém poderia me indicar uma solução pra eu estudar e implementar?
    • Por Xevious
      No carregamento da página eu coloco alguns pontos no mapa.
      Mas depois, recebo um evento via WebService que devo colocar mais um ponto.
      E não funciona da forma como to fazendo porque o objeto não ta mais instanciado neste momento.
      Teria como eu vincular um objeto a uma variável JS pra poder setar um ponto a mais?
       
      tentei via #map (map é o div do mapa) e não deu certo
       
      Também tentei passar a variável pra fora da função pra poder ser enchergada por toda a página
      mas daí o mapa não aparece
       
      Alguém sabe como resolver?
    • Por Julio.mac
      Boa tarde.

      Estou usando um código JavaScript que usa a latitude e longitude para gerar os valores:

      sw_lat
      sw_lng
      ne_lat
      ne_lng

      Após o JavaScript usar a latitude e longitude é gerado os valores para sw_lat, sw_lng, ne_lat, ne_lng para fazer um http request. A url é formada com os pametros:

      http://www.example.com/v1/bizs?sw_lat=38.70881635599164&sw_lng=-107.03125&ne_lat=46.0329596654222&ne_lng=-92.96875

      Minha dúvida é como faço para usar a longitude/ latitude para calcular em PHP esses valores:

      sw_lat = 38.70881635599164
      sw_lng = -107.03125
      ne_lat = 46.0329596654222
      ne_lng = -92.96875

      Por favor, alguém pode me ajudar a resolver esse problema?
       
      Abraço
       
    • Por Denilson Paiva
      Hello friends.

      Estou com um codigo javascript do google maps funcionando perfeitamente (exibe os marcadores personalizados, cordenadas, nomes etc de um array list). porém, preciso que quando clicado no icone (pin ou marcador) abra um window com o nome, e link assim que clicado.

      alguem pode me ajudar nessa ai? segue o codigo completo:


      <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, scrollwheel: false, zoomControl : true, panControl : false, //streetViewControl : true, mapTypeControl: false, //overviewMapControl: true, center: {lat: -19.4710913, lng: -42.5563031} //center: {lat: -5.18229664, lng: -37.35511959} }); setMarkers(map); } // Data for the markers consisting of a name, a LatLng and a zIndex for the // order in which these markers should display on top of each other. var lista = [ ['Bondi Beach', -19.457739, -42.555077, 1,'images/pin.png'], ['Coogee Beach', -19.455503, -42.554980, 2,'images/pin.png'], ['Cronulla Beach', -19.448637, -42.555208, 3,'images/pin.png'] ]; function setMarkers(map) { var shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: 'poly' }; for (var i = 0; i < lista.length; i++) { var anuncio = lista[i]; //---------------------------------------------- var marker = new google.maps.Marker({ position: {lat: anuncio[1], lng: anuncio[2]}, map: map, icon: anuncio[4], shape: shape, title: anuncio[0], // zIndex: anuncio[3] }); //--------------------------------------------- } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.