6

Google Direction API를 사용하여 2 곳 A와 B 사이의 경로 경로를 표시하고 있습니다.이 작업을 수행 할 수 있습니다. 이제 주어진 장소 C가 A와 B의 경로 경로에 속하는지 확인해야합니다.방향 api : 장소가 2 곳 사이의 경로 경로에 속하는지 확인하십시오.

다음은 코드에서 생성 한 경로 경로의 스냅 샷입니다. 나는 그것에 대해 어떻게

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); 
         } 
        }); 
       }); 
      } 
을 갈 수

: 여기

Route map between A and B

는 해당 코드?

+0

나는 코드에서 "장소 C"를 볼 수 없습니다. 하나의 옵션은 RouteBoxer를 사용하여 경로의 적당한 범위를 결정하는 것입니다. 중간 지점이이 경계에 포함되어 있으면 충분할 수 있습니다. 그렇지 않으면 추가 테스트를 수행 할 수 있습니다 (예 : 경로 폴리 라인으로부터의 거리). [비슷한 질문] (http://stackoverflow.com/questions/20476917/find -a-place-lies-between-source-and-destination-google-maps-and-places-api) (대답이 없어도) – geocodezip

+0

[장소를 얻는 방법 (예 : 주유소) Google Maps API에서 출발지와 목적지 간 경로 따라] (http://stackoverflow.com/questions/17283826/how-to-to-get-places-eg-gas-stations-along-route-between-origin-and- 목적지) – geocodezip

+1

[주행 거리 (~ 0.25 마일 이내)] (http://www.geocodezip.com/v3_SO_RouteBoxerPlaces_configurable.html?dist=0.25&to=Electronics%20City&from=BTM%20Layout&type=gas_station&name=&submit=) – geocodezip

답변

5

당신은 (당신이 https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry에 스크립트 SRC를 변경하여 구글지도를 요청할 수 있습니다) 및 를 사용하여 점 C와 DirectionsService에서 반환 된 폴리 라인의 LatLng을 사용하여 형상 라이브러리를 사용할 수 있습니다. 당신이 그렇게 점 C는 "길에"여부를 판단, 웨이 포인트로 추가 한 경우

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

가 다시, 점 C는 항상 A와 B 사이의 방법에있을 수 실제로 약간입니다 까다로운 개념 - 길에서 멀리 떨어져있어 "도중에"있지 않아?

+0

그래서 isLocationOnEdge를 사용하면 폴리 라인의 점만 찾을 수 있습니까? 폴리 라인 근처에있을 수있는 지점이 아닙니다 (예 : 폴리 라인에서 0.5 킬로미터 말). –

+0

설명서에 대한 링크를보십시오. 'isLocationOnEdge'는 옵션 인 세 번째 인자 인'tolerance'를 취합니다.이 값은 가장자리에서 여전히 고려해야 할 점의 수입니다. 즉, 함수가'true'를 반환하는 것과 같습니다. 같은 도수의 점 정확한 위도 또는 경도에 따라 ** 실제 ** 거리 (km 또는 mi)를 제공합니다. – Adam

0

안녕하세요 @ 아담과 @Adarsh ​​Konchady 나는이 토론에서 제안 된 것과 같은 접근 방식을 따랐습니다. 여전히 동일한 경로에 지점을 배치 할 수 없습니다 (지리적으로 존재 함에도 불구하고). 아래는 제 코드입니다. 첨부 된 코드를 검토하고 내가 잘못하고 있는지 알려달라고 요청합니다.

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