6

我正在使用Google方向API繪製2個地點A和B之間的路徑路徑。我可以做到這一點。現在,我需要檢查給定的地點C落在A和B的路徑路徑中。方向api:檢查某個地點是否落入兩個地點之間的路徑路徑

下面是我從代碼生成的路徑路徑的快照。

Route map between A and B

以下是相應的代碼:

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

我怎麼能走呢?

+0

我看不到 「的地方C」 在你的代碼。一種選擇是使用RouteBoxer爲您的路線確定一個合理的界限。如果中間點包含在這些邊界內,那可能足夠好了,否則您可以執行進一步的測試(例如距離路線折線的距離。請參見[此類似的問題](http://stackoverflow.com/questions/20476917/find -a-place-lies-between-source-and-destination-google-maps-and-places-api)(它也沒有答案) – geocodezip

+0

可能的重複[如何獲取地點(例如加油站)沿着谷歌地圖API中的出發地和目的地之間的路線](http://stackoverflow.com/questions/17283826/how-to-to-get-places-eg-gas-stations-along-route-between-origin-and- destinati) – 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

您可以使用幾何庫(你可以通過改變你的腳本SRC給https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry與谷歌地圖申請),並使用並使用C點和從DirectionsService返回的折線的LatLng

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

話又說回來,點C可以ALWAYS是A和B之間的方式,如果你增加一條,作爲一個航點,所以確定點C是「在路上」,實際上是位一個棘手的概念 - 有多遠,因爲它不能「在途中」太遠?

+0

所以使用isLocationOnEdge,我只能找到折線上的點嗎?不是可能靠近多段線的點(比如說距離多段線0.5公里)。 –

+0

查看文檔鏈接。 'isLocationOnEdge'接受一個可選的第三個參數 - 'tolerance',這是你指定的點數在邊緣上仍然被考慮的度數 - 也就是說函數返回'true'值得指出的是,相同的度數將根據確切的緯度或經度給你一個不同的**真實**距離(以公里或英里爲單位)。 – Adam

0

嗨@Adam和@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>

相關問題