方向api：检查一个地方是否落在2个地方之间的路线中

时间：2013-12-10 17:53:29

标签： google-maps google-maps-api-3 google-places-api google-direction

我正在使用Google Direction API绘制2个地点A和B之间的路线路径。我能够做到这一点。现在，我需要检查一个地方C是否属于A和B的路径。

以下是我从代码中生成的路径路径的快照。

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

我该怎么办呢？

2 个答案:

答案 0 :(得分：6)

您可以使用几何库（您可以通过将脚本src更改为https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry来请求谷歌地图）并使用isLocationOnEdge并使用点C的LatLng和折线从DirectionsService返回。

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

然后，如果你把它作为航点添加，那么C点可以总是在A和B之间的路上，所以确定点C是否“在路上”实际上是一点点棘手的概念 - 离开的距离太远，以至于“不在路上”？

答案 1 :(得分：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>
		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>

相关问题
最新问题