6

Sto utilizzando l'API di Google Direction per tracciare il percorso del percorso tra 2 posti A e B. Sono in grado di farlo. Ora, ho il requisito di verificare se un posto C cade nel percorso percorso di A e B.Direction api: controlla se un posto cade nel percorso del percorso tra 2 posti

Ecco l'istantanea del percorso percorso che ho generato dal mio codice.

Route map between A and B

Ecco il codice corrispondente:

function initialize() { 
       var input = document.getElementById('searchTextFieldSource'); 
       var input1 = document.getElementById('searchTextFieldDestination'); 

       var autocomplete = new google.maps.places.Autocomplete(input); 
       var autocomplete1 = new google.maps.places.Autocomplete(input1); 
       google.maps.event.addListener(autocomplete1, 'place_changed', function() { 
        var place = autocomplete.getPlace(); 
        document.getElementById('city1').value = place.name; 
        var place1Lat = place.geometry.location.lat(); 
        var place1Lng = place.geometry.location.lng(); 
        document.getElementById('cityLat1').value = place1Lat; 
        document.getElementById('cityLng1').value = place1Lng; 

        var obj = new Object(); 
        obj.city =place.name; 
        obj.latitude = place.geometry.location.lat(); 
        obj.longitude = place.geometry.location.lng(); 
        locations.push(obj); 


        var place2 = autocomplete1.getPlace(); 
        document.getElementById('city2').value = place2.name; 
        var place2Lat = place2.geometry.location.lat(); 
        var place2Lng = place2.geometry.location.lng(); 
        document.getElementById('cityLat2').value = place2Lat; 
        document.getElementById('cityLng2').value = place2Lng; 

        var obj = new Object(); 
        obj.city = place2.name; 
        obj.latitude = place2.geometry.location.lat(); 
        obj.longitude = place2.geometry.location.lng(); 
        locations.push(obj); 

        directionsDisplay = new google.maps.DirectionsRenderer(); 
        var startPlace = new google.maps.LatLng(place1Lat, place1Lng); 

        var mapOptions = { 
         zoom:7, 
         center: startPlace 
        } 

        var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
        directionsDisplay.setMap(map); 
        //refreshMap(locations); 

        var start = $("#city1").val(); 
        var end = $("#city2").val(); 
        var request = { 
          origin:start, 
          destination:end, 
          travelMode: google.maps.TravelMode.DRIVING 
        }; 
        directionsService.route(request, function(response, status) { 
         if (status == google.maps.DirectionsStatus.OK) { 
          directionsDisplay.setDirections(response); 
         } 
        }); 
       }); 
      } 

Come posso fare?

+0

non vedo "posto C" nel codice. Un'opzione è usare RouteBoxer per determinare un limite ragionevole per il tuo percorso. Se il punto intermedio è contenuto da quei limiti, ciò potrebbe essere abbastanza buono, altrimenti puoi eseguire ulteriori test (come la distanza dalla polilinea del percorso. Vedi [questa domanda simile] (http://stackoverflow.com/questions/20476917/find -a-place-lies-between-source-and-destination-google-maps-and-places-api) (che non ha una risposta) – geocodezip

+0

possibile duplicato di [Come ottenere posti (ad es. stazioni di servizio) lungo il percorso tra origine e destinazione nell'API di Google Maps] (http://stackoverflow.com/questions/17283826/how-to-to-get-places-eg-gas-stations-along-route-between-origin-and- destinati) – geocodezip

+1

[Stazioni di rifornimento lungo (entro ~ 0,25 miglia di) percorso] (http://www.geocodezip.com/v3_SO_RouteBoxerPlaces_configurable.html?dist=0.25&to=Electronics%20City&from=BTM%20Layout&type=gas_station&name=&submit=) – geocodezip

risposta

5

È possibile utilizzare la libreria geometria (si può richiedere con google maps cambiando la tua src script per https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry) e usare e utilizzare il LatLng del punto C e la polilinea che viene restituito dalla DirectionsService.

https://developers.google.com/maps/documentation/javascript/geometry#isLocationOnEdge

Poi di nuovo, il punto C potrebbe SEMPRE essere sulla strada tra A e B, se si è aggiunto come un waypoint, quindi determinare se il punto C è "sulla strada" è in realtà un po 'di un concetto difficile: quanto lontano è troppo lontano per non essere "in arrivo"?

+0

Quindi, usando isLocationOnEdge, posso solo trovare i punti sulla polilinea giusto? Non i punti che possono essere vicini alla polilinea (come ad esempio 0,5 km dalla polilinea). –

+0

Guarda il link alla documentazione. 'isLocationOnEdge' prende un terzo argomento opzionale -' tolerance' che è il numero di gradi specificato per il punto da considerare ancora sul bordo - vale a dire che la funzione restituisce 'true' Vale la pena sottolineare che lo stesso numero di gradi ti fornirà una diversa ** distanza reale ** (in km o mi) a seconda della latitudine o longitudine esatta. – Adam

0

Ciao @Adam e @Adarsh ​​Konchady Ho seguito lo stesso approccio suggerito in queste discussioni. Ancora non sono in grado di localizzare il punto sulla stessa rotta (sebbene sia geograficamente presente). Di seguito è il mio codice. Ti chiedo di verificare il codice allegato e fammi sapere se sto facendo qualcosa di sbagliato.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Directions service</title> 
 
    <style> 
 
\t \t html, body { 
 
\t \t height: 100%; 
 
\t \t margin: 0; 
 
\t \t } 
 
\t \t 
 
\t \t #map { 
 
\t \t height: 50%; 
 
\t \t width: 50%; 
 
\t \t } 
 
\t \t 
 
\t \t .map-center { 
 
\t \t \t border: solid 1px black; 
 
\t \t \t position: absolute; 
 
\t \t \t left: 50%; 
 
\t \t \t top: 60%; 
 
\t \t \t background-color: white; 
 
\t \t \t z-index: 100; 
 

 
\t \t \t height: 400px; 
 
\t \t \t margin-top: -200px; 
 

 
\t \t \t width: 600px; 
 
\t \t \t margin-left: -300px; 
 
\t \t } 
 

 
\t \t #source { 
 
\t \t width: 50%; 
 
\t \t height: 25px; 
 
\t \t } 
 

 
\t \t #destination { 
 
\t \t width: 50%; 
 
\t \t height: 25px; 
 
\t \t } 
 
\t \t 
 
\t \t #customerSource { 
 
\t \t width: 50%; 
 
\t \t height: 25px; 
 
\t \t } 
 
    </style> 
 
    </head> 
 
    <body> 
 
\t <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry"></script> 
 
\t <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script> 
 
    <script> 
 
\t \t var sourceLat, sourceLng; 
 
\t \t var destinationLat, destinationLng; 
 
\t \t function initialize() { 
 

 
\t \t \t var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
\t \t \t var directionsService = new google.maps.DirectionsService(); 
 
\t \t \t var map; 
 
\t \t \t var routeBoxer = new RouteBoxer(); 
 
\t \t \t var distance = 1; 
 
\t \t \t var cascadiaFault; 
 
\t \t \t var routeBounds = []; 
 

 
\t \t \t var mapOptions = { 
 
\t \t \t \t center: new google.maps.LatLng(37.7831,-122.4039), 
 
\t \t \t \t zoom: 12, 
 
\t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t \t }; 
 

 
\t \t \t var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
\t \t \t directionsDisplay.setMap(map); 
 

 
\t \t \t var source = new google.maps.places.Autocomplete(document.getElementById('source')); 
 
\t \t \t var infoWindow = new google.maps.InfoWindow(); 
 
\t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t map: map 
 
\t \t \t }); 
 

 
\t \t \t google.maps.event.addListener(source, 'place_changed', function() { 
 
\t \t \t infoWindow.close(); 
 
\t \t \t var place = source.getPlace(); 
 
\t \t \t marker.setPosition(place.geometry.location); 
 
\t \t \t sourceLat = marker.getPosition().lat(); 
 
\t \t \t sourceLng = marker.getPosition().lng(); 
 
\t \t \t infoWindow.setContent('<div><strong>' + place.name + '</strong><br>'); 
 
\t \t \t }); 
 

 
\t \t \t var destination = new google.maps.places.Autocomplete(document.getElementById('destination')); 
 
\t \t \t var infoWindow = new google.maps.InfoWindow(); 
 
\t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t map: map 
 
\t \t \t }); 
 

 
\t \t \t google.maps.event.addListener(destination, 'place_changed', function() { 
 
\t \t \t infoWindow.close(); 
 
\t \t \t var place = destination.getPlace(); 
 
\t \t \t marker.setPosition(place.geometry.location); 
 
\t \t \t destinationLat = marker.getPosition().lat(); 
 
\t \t \t destinationLng = marker.getPosition().lng(); 
 
\t \t \t infoWindow.setContent('<div><strong>' + place.name + '</strong><br>'); 
 

 
\t \t \t \t //Same event, draw route 
 
\t \t \t  var start = new google.maps.LatLng(sourceLat, sourceLng); 
 
\t \t \t \t var end = new google.maps.LatLng(destinationLat, destinationLng); 
 
\t \t \t \t var request = { 
 
\t \t \t \t \t origin: start, 
 
\t \t \t \t \t destination: end, 
 
\t \t \t \t \t travelMode: google.maps.TravelMode.DRIVING 
 
\t \t \t \t }; 
 
\t \t \t \t directionsService.route(request, function(response, status) { 
 
\t \t \t \t \t if (status == google.maps.DirectionsStatus.OK) { 
 
\t \t \t \t \t \t directionsDisplay.setDirections(response); 
 
\t \t \t \t \t \t directionsDisplay.setMap(map); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t // Box around the overview path of the first route 
 
\t \t \t \t \t  var path = response.routes[0].overview_path; 
 
\t \t \t \t \t  var boxes = routeBoxer.box(path, distance); 
 
\t \t \t \t \t \t var pathsTemp = []; 
 
\t \t \t \t \t \t for (var i = 0; i < boxes.length; i++) { 
 
\t \t \t \t \t \t \t var bounds = boxes[i]; 
 
\t \t \t \t \t \t \t // Perform search over this bounds 
 
\t \t \t \t \t \t \t pathsTemp.push(bounds.getCenter()); 
 
\t \t \t \t \t \t \t routeBounds.push(bounds); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t var temp = {} 
 
\t \t \t \t \t \t cascadiaFault = new google.maps.Polyline({ 
 
\t \t \t \t \t \t \t paths: pathsTemp 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t //alert(pathsTemp); 
 
\t \t \t \t \t \t //alert(cascadiaFault.getPath()); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 

 
\t \t \t var customerSource = new google.maps.places.Autocomplete(document.getElementById('customerSource')); 
 
\t \t \t var infoWindow = new google.maps.InfoWindow(); 
 
\t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t map: map 
 
\t \t \t }); 
 

 
\t \t \t google.maps.event.addListener(customerSource, 'place_changed', function() { 
 
\t \t \t infoWindow.close(); 
 
\t \t \t var place = customerSource.getPlace(); 
 
\t \t \t marker.setPosition(place.geometry.location); 
 
\t \t \t sourceLat = marker.getPosition().lat(); 
 
\t \t \t sourceLng = marker.getPosition().lng(); 
 
\t \t \t infoWindow.setContent('<div><strong>' + place.name + '</strong><br>'); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t google.maps.event.addDomListener(document.getElementById('search'), 'click', function searchLocation() { 
 
\t \t \t alert(cascadiaFault); 
 
\t \t \t if(google.maps.geometry.poly.isLocationOnEdge(customerSource.getPlace().geometry.location, cascadiaFault)) { 
 
\t \t \t \t alert("On the way..!!"); 
 
\t \t \t } else { 
 
\t \t \t \t alert("Not on the way..!!"); 
 
\t \t \t } 
 
\t \t \t alert(routeBounds); 
 
\t \t \t alert(customerSource.getPlace().geometry.location); 
 
\t \t \t }); 
 

 
\t \t } 
 
\t \t 
 
\t \t google.maps.event.addDomListener(window, "load", initialize); 
 

 
    </script> 
 
\t <b>Ride</b><br> 
 
\t <table> 
 
\t \t <col width="150"> 
 
\t \t <col width="1000"> 
 
\t \t <tr> 
 
\t \t \t <td>Source</td> 
 
\t \t \t <td><input type="text" id="source"></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Destination</td> 
 
\t \t \t <td><input type="text" id="destination"></td> 
 
\t \t </tr> 
 
\t </table> 
 
\t <b>Customer</b><br> 
 
\t <table> 
 
\t \t <col width="150"> 
 
\t \t <col width="1000"> 
 
\t \t <tr> 
 
\t \t \t <td>Customer Source</td> 
 
\t \t \t <td><input type="text" id="customerSource"><input type="button" id="search" value="Search" /></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td>Customer Destination</td> 
 
\t \t \t <td><input type="text" id="customerDestination"></td> 
 
\t \t </tr> 
 
\t </table> 
 
\t <div id="map" class="map-center"></div> 
 
    </body> 
 
</html>