-
Conteúdo Similar
-
Por helkton
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
-
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 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>
-
POWERED BY:
