6

2 yön A ve B arasındaki güzergah yolunu çizmek için Google Yönlendirme API'sını kullanıyorum. Bunu yapabilirim. Şimdi, C ve A yollarının yolunda bir yere C düştüğünü kontrol etme şartım var.Yön api: Bir yolun 2 yol arasındaki bir rotada düşüp düşmediğini kontrol edin

İşte kodumdan oluşturduğum yol yolunun anlık görüntüsü. Bu konuda nasıl

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

: Burada

Route map between A and B

gelen kodu?

+0

ben kodunuzda "yer C" görmüyorum. Bir seçenek rotanız için makul sınırları belirlemek için RouteBoxer kullanmaktır. Eğer ara nokta bu sınırlar tarafından içeriyorsa, bu yeterince iyi olabilir, aksi halde daha fazla test gerçekleştirebilirsiniz (rota poligonundan uzaklaşmak gibi. [Bu benzer soruya bakın] (http://stackoverflow.com/questions/20476917/find -o-yer-yalan-arasında-kaynak-ve-hedef-google-haritalar-ve-yerler-api) (hangi bir cevap yok) – geocodezip

+0

muhtemel [Nasıl Gidilir Yerler (örneğin Benzin İstasyonları) Google Haritalar API'sı Menşei ve Hedef Arasında Yolculuk Boyunca] (http://stackoverflow.com/questions/17283826/how-to-to-get-places-eg-gas-stations-along-route-between-origin-and- destinati) – geocodezip

+1

[Güzergahınız boyunca (0,25 mil boyunca) benzin istasyonları] (http://www.geocodezip.com/v3_SO_RouteBoxerPlaces_configurable.html?dist=0.25&to=Electronics%20City&from=BTM%20Layout&type=gas_station&name=&submit=) – geocodezip

cevap

5

(siz https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry için script src değiştirerek google maps ile talep edebilir) ve kullanmak ve nokta C ve DirectionsService döndürülen ise poligonun LatLng kullanmak geometri kitaplığını kullanabilirsiniz. Bunu C noktası "yolda" olup olmadığını belirlerken, bir geçiş noktası olarak eklenirse

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

Sonra tekrar, C noktası DAİMA A ve B arasındaki yolda olabilir aslında bir parçasıdır zor bir kavram - yoldan uzaklaşmanın "yolda" olmak için ne kadar uzak olduğunu?

+0

Yani, isLocationOnEdge kullanarak, yalnızca polyline doğrudaki noktaları bulabilirim? Polyline yakınında olabilecek noktalar değil (polyline'dan 0.5 km gibi). –

+0

Belgelerin bağlantısına bakın. 'isLocationOnEdge', isteğe bağlı üçüncü bir argümanı alır - 'tolerans', noktanın hala üzerinde durulması gereken noktaların sayısıdır - yani 'true' işlevinin döndürülmesi için ', aynı sayıda dereceyi işaret ediyor. Tam enlem veya boylama bağlı olarak size farklı bir ** gerçek ** mesafe (km veya mil) verecektir. – Adam

0

Merhaba @Adam ve @Adarsh ​​Konchady Bu tartışmalarda önerildiği gibi aynı yaklaşımı takip ettim. Yine de aynı rotadaki noktayı bulamıyorum (coğrafi olarak mevcut olsa da). Aşağıda benim kodum. Ekteki kodu incelemenizi rica ediyorum ve yanlış bir şey yapsam bana haber ver.

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

İlgili konular