方向API：場所が2つの場所の間のルートパスにあるかどうかを確認します
Google Direction APIを使用して、2つの場所AとBの間のルートパスをプロットしています。これを行うことができます。さて、与えられた場所CがAと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);
}
});
});
}
どうすればそれについて行くことができますか？
（スクリプトsrcをhttps://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometryに変更することでGoogleマップでリクエストできます）ジオメトリライブラリを使用し、isLocationOnEdgeを使用してポイントCのLatLngとポリラインを使用できます。 DirectionsServiceから返されます。
https://developers.google.com/maps/documentation/javascript/geometry#isLocationOnEdge
次に、ポイントCをウェイポイントとして追加した場合、ポイントCは[〜＃〜]常に[〜＃〜]がAとBの間の途中にある可能性があります、したがって、ポイントCが「途中」であるかどうかを判断することは、実際には少しトリッキーな概念です。「途中」にならないようにするには、どれだけ離れているのでしょうか。
こんにちは@Adamと@AdarshKonchady私はこれらの議論で提案されたのと同じアプローチに従いました。それでも、同じルート上でポイントを見つけることができません（地理的には存在しますが）。以下は私のコードです。添付のコードを確認し、問題が発生した場合はお知らせください。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
height: 50%;
width: 50%;
}
.map-center {
border: solid 1px black;
position: absolute;
left: 50%;
top: 60%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
#source {
width: 50%;
height: 25px;
}
#destination {
width: 50%;
height: 25px;
}
#customerSource {
width: 50%;
height: 25px;
}
</style>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
<script>
var sourceLat, sourceLng;
var destinationLat, destinationLng;
function initialize() {
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var map;
var routeBoxer = new RouteBoxer();
var distance = 1;
var cascadiaFault;
var routeBounds = [];
var mapOptions = {
center: new google.maps.LatLng(37.7831,-122.4039),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
var source = new google.maps.places.Autocomplete(document.getElementById('source'));
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(source, 'place_changed', function() {
infoWindow.close();
var place = source.getPlace();
marker.setPosition(place.geometry.location);
sourceLat = marker.getPosition().lat();
sourceLng = marker.getPosition().lng();
infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
});
var destination = new google.maps.places.Autocomplete(document.getElementById('destination'));
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(destination, 'place_changed', function() {
infoWindow.close();
var place = destination.getPlace();
marker.setPosition(place.geometry.location);
destinationLat = marker.getPosition().lat();
destinationLng = marker.getPosition().lng();
infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
//Same event, draw route
var start = new google.maps.LatLng(sourceLat, sourceLng);
var end = new google.maps.LatLng(destinationLat, destinationLng);
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);
directionsDisplay.setMap(map);
// Box around the overview path of the first route
var path = response.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
var pathsTemp = [];
for (var i = 0; i < boxes.length; i++) {
var bounds = boxes[i];
// Perform search over this bounds
pathsTemp.Push(bounds.getCenter());
routeBounds.Push(bounds);
}
var temp = {}
cascadiaFault = new google.maps.Polyline({
paths: pathsTemp
});
//alert(pathsTemp);
//alert(cascadiaFault.getPath());
} else {
alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
}
});
});
var customerSource = new google.maps.places.Autocomplete(document.getElementById('customerSource'));
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(customerSource, 'place_changed', function() {
infoWindow.close();
var place = customerSource.getPlace();
marker.setPosition(place.geometry.location);
sourceLat = marker.getPosition().lat();
sourceLng = marker.getPosition().lng();
infoWindow.setContent('<div><strong>' + place.name + '</strong><br>');
});
google.maps.event.addDomListener(document.getElementById('search'), 'click', function searchLocation() {
alert(cascadiaFault);
if(google.maps.geometry.poly.isLocationOnEdge(customerSource.getPlace().geometry.location, cascadiaFault)) {
alert("On the way..!!");
} else {
alert("Not on the way..!!");
}
alert(routeBounds);
alert(customerSource.getPlace().geometry.location);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
<b>Ride</b><br>
<table>
<col width="150">
<col width="1000">
<tr>
<td>Source</td>
<td><input type="text" id="source"></td>
</tr>
<tr>
<td>Destination</td>
<td><input type="text" id="destination"></td>
</tr>
</table>
<b>Customer</b><br>
<table>
<col width="150">
<col width="1000">
<tr>
<td>Customer Source</td>
<td><input type="text" id="customerSource"><input type="button" id="search" value="Search" /></td>
</tr>
<tr>
<td>Customer Destination</td>
<td><input type="text" id="customerDestination"></td>
</tr>
</table>
<div id="map" class="map-center"></div>
</body>
</html>