6

Ich verwende Google Direction API, um den Routenpfad zwischen 2 Orten A und B zu plotten. Ich bin in der Lage, dies zu tun. Jetzt habe ich eine Anforderung zu überprüfen, ob ein Ort C in den Routenpfad von A und B fällt.Richtung api: Überprüfen Sie, ob ein Ort in den Routenpfad zwischen 2 Orten fällt

Hier ist der Schnappschuss des Routenpfads, den ich aus meinem Code generiert habe.

Route map between A and B

Hier ist der entsprechende Code:

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); 
         } 
        }); 
       }); 
      } 

Wie kann ich vorgehen?

+0

ich im Code finden Sie unter "Ort C" nicht. Eine Möglichkeit besteht darin, mit RouteBoxer eine vernünftige Grenze für Ihre Route zu bestimmen. Wenn der Zwischenpunkt in diesen Grenzen enthalten ist, kann das gut genug sein, sonst können Sie weitere Tests durchführen (z. B. Entfernung von der Routen-Polylinie. Siehe [diese ähnliche Frage]) (http://stackoverflow.com/questions/20476917/find) -a-place-lies-zwischen-Quelle-und-Ziel-google-maps-and-places-api) (die auch keine Antwort hat) – geocodezip

+0

mögliche Duplikate von [Wie Orte zu bekommen (zB Tankstellen) entlang der Route zwischen Herkunft und Ziel in der Google Maps-API] (http://stackoverflow.com/questions/17283826/how-to-to-get-places-eg-gas-stations-along-route-between-origin-and- destinati) – geocodezip

+1

[Tankstellen entlang (innerhalb ~ 0.25 Meilen von) Ihrer Route] (http://www.geocodezip.com/v3_SO_RouteBoxerPlaces_configurable.html?dist=0.25&to=Electronics%20City&from=BTM%20Layout&type=gas_station&name=&submit=) – geocodezip

Antwort

5

können Sie die Geometrie-Bibliothek verwenden, und verwenden und verwenden Sie die LatLng von Punkt C und der Linienzug (Sie mit Google Maps, indem Sie Ihre script src zu https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry anfordern können), die von der DirectionsService zurückgeführt wird.

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

Dann wieder, Punkt C konnte IMMER zwischen A und B auf dem Weg, wenn Sie es als Wegpunkt hinzugefügt, so zu bestimmen, ob Punkt C „auf dem Weg“ ist eigentlich ein bisschen ein kniffliges Konzept - wie weit ist es zu weit, um nicht "auf dem Weg" zu sein?

+0

Also mit isLocationOnEdge, kann ich nur die Punkte auf der Polylinie finden, richtig? Nicht die Punkte, die sich in der Nähe der Polylinie befinden (etwa 0,5 km von der Polylinie entfernt). –

+0

Sehen Sie sich den Link zur Dokumentation an. 'isLocationOnEdge' nimmt ein optionales drittes Argument - 'tolerance', das ist die Anzahl der Grad, die Sie für den noch zu betrachtenden Punkt am Rand angeben - dh für die Funktion, die' true' zurückgibt. Es ist erwähnenswert, dass dieselbe Anzahl von Graden vorhanden ist gibt Ihnen eine andere ** reale ** Entfernung (in km oder mi) abhängig von der genauen Breite oder Länge. – Adam

0

Hallo @Adam und @Adarsh ​​Konchady Ich habe den gleichen Ansatz verfolgt wie in diesen Diskussionen vorgeschlagen. Ich bin immer noch nicht in der Lage, den Punkt auf derselben Route zu finden (obwohl er geographisch vorhanden ist). Unten ist mein Code. Ich bitte Sie, den beigefügten Code zu lesen und mich zu informieren, wenn ich etwas falsch mache.

<!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>

Verwandte Themen