我正在出租车预订应用程序中工作，为此我还会显示搜索到的pickup location和drop location的Google地图，预订时有一个condition，即我们在I-285 Atlanta, GA, USA周边以及距离周边100英里的地方提供服务。在谷歌搜索此地址时，它会显示一个红色的多边形。但我没有在谷歌找到任何帮助来检查用户目的地是否位于这个周边内或外围。
任何提示都会很棒。
答案 0 :(得分：0)
我解决了这个问题，我只是添加了完整的代码，有人可能需要它。
为自动完成地址设置两个输入框，搜索位置，脚本将搜索您选择的位置是否位于多边形内部。但多边形对用户不可见。因为我不想这样，但如果您想要显示，请从此行polygon.setMap(map)删除评论。脚本将显示路线和持续时间。
<强> HTML
<input type="text" id="source">
<input type="text" id="destination">
<div id="divAlertError"></div>
<div id="map"></div>
<强>的JavaScript
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&language=us&key=YOUR_MAP_API_KEY" aysnc defer></script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
center: {lat: 33.63663200000001, lng: -84.49224500000003},
zoom: 10
});
new AutocompleteDirectionsHandler(map);
}
/**
* @constructor autocomplete
*/
function AutocompleteDirectionsHandler(map) {
this.map = map;
this.originPlaceId = null;
this.destinationPlaceId = null;
this.travelMode = 'DRIVING';
//this.polygon='';
var originInput = document.getElementById('source');
var destinationInput = document.getElementById('destination');
//var modeSelector = document.getElementById('mode-selector');
var infowindow = new google.maps.InfoWindow();
//var infowindowContent = document.getElementById('infowindow-content');
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
this.geocoder = new google.maps.Geocoder(); //Added on 27/09/2016
this.bounds = new google.maps.LatLngBounds();
var originAutocomplete = new google.maps.places.Autocomplete(
originInput, {placeIdOnly: true});
var destinationAutocomplete = new google.maps.places.Autocomplete(
destinationInput, {placeIdOnly: true});
// Define the LatLng coordinates for the polygon.
var atlantaArea = [
{lat: 33.636632 , lng: -84.492245},
{lat: 33.656424 , lng: -84.497566},
{lat: 33.690281 , lng: -84.500055},
{lat: 33.722983 , lng: -84.50263},
{lat: 33.753532 , lng: -84.495506},
{lat: 33.764842 , lng: -84.493361},
{lat: 33.786852 , lng: -84.493146},
{lat: 33.799477 , lng: -84.488468},
{lat: 33.825221 , lng: -84.489541},
{lat: 33.843117 , lng: -84.487481},
{lat: 33.86418 , lng: -84.479628},
{lat: 33.884418 , lng: -84.470015},
{lat: 33.890296 , lng: -84.460917},
{lat: 33.906397 , lng: -84.431992},
{lat: 33.915942 , lng: -84.406672},
{lat: 33.912167 , lng: -84.379163},
{lat: 33.910208 , lng: -84.361782},
{lat: 33.912024 , lng: -84.357147},
{lat: 33.913769 , lng: -84.352083},
{lat: 33.918007 , lng: -84.338307},
{lat: 33.920322 , lng: -84.30522},
{lat: 33.912986 , lng: -84.286294},
{lat: 33.902906 , lng: -84.274063},
{lat: 33.891757 , lng: -84.2593},
{lat: 33.885487 , lng: -84.251575},
{lat: 33.851261 , lng: -84.246597},
{lat: 33.846431 , lng: -84.247198},
{lat: 33.827218 , lng: -84.252477},
{lat: 33.816023 , lng: -84.251447},
{lat: 33.802936 , lng: -84.250138},
{lat: 33.778184 , lng: -84.241297},
{lat: 33.764753 , lng: -84.232392},
{lat: 33.752604 , lng: -84.231899},
{lat: 33.737171 , lng: -84.230762},
{lat: 33.714702 , lng: -84.240954},
{lat: 33.698994 , lng: -84.266081},
{lat: 33.683997 , lng: -84.310048},
{lat: 33.672854 , lng: -84.328415},
{lat: 33.668015 , lng: -84.340324},
{lat: 33.65203 , lng: -84.367125},
{lat: 33.633023 , lng: -84.400975},
{lat: 33.624894 , lng: -84.422486},
{lat: 33.617139 , lng: -84.438515},
{lat: 33.620516 , lng: -84.460616},
{lat: 33.619319 , lng: -84.483039},
{lat: 33.623143 , lng: -84.488318}
];
// Construct the polygon.
var polygon = new google.maps.Polygon({
paths: atlantaArea,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
//polygon.setMap(map);
this.directionsDisplay.setMap(map);
this.setupPlaceChangedListener(this.map,infowindow,originAutocomplete, 'ORIG',polygon);
this.setupPlaceChangedListener(this.map,infowindow,destinationAutocomplete, 'DEST',polygon);
}
/*AutocompleteDirectionsHandler.prototype.drawPolygon = function(map)
{
}*/
/*place changed listner*/
AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(map,infowindow,autocomplete, mode,polygon) {
var me = this;
autocomplete.bindTo('bounds', this.map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.place_id) {
window.alert("Please select an option from the dropdown list.");
return;
}
var newBounds = new google.maps.LatLngBounds(me.bounds.getSouthWest(), me.bounds.getNorthEast());
if (!place.geometry) {
me.geocodeAddress(place.name,polygon);
//window.alert("Autocomplete's returned place contains no geometry");
//return;
};
if (mode === 'ORIG') {
me.originPlaceId = place.place_id;
} else {
me.destinationPlaceId = place.place_id;
}
me.route(map,infowindow);
});/*listner*/
};
AutocompleteDirectionsHandler.prototype.geocodeAddress = function(addr,polygon) {
var me = this;
me.geocoder.geocode({'address': addr}, function(results, status) {
if (status === 'OK') {
var newBounds = new google.maps.LatLngBounds(me.bounds.getSouthWest(), me.bounds.getNorthEast());
//console.log(results);
//newBounds.extend(results[0].geometry.location);
//map.fitBounds(newBounds);
if (google.maps.geometry.poly.containsLocation(results[0].geometry.location, polygon)){
jQuery('#divAlertError').text('The area contains the address');
} else {
jQuery('#divAlertError').text('The address is outside of the area.');
};
} else {
jQuery('#divAlertError').text('Geocode was not successful for the following reason: ' + status);
}
});
};
/*Route*/
AutocompleteDirectionsHandler.prototype.route = function(map,infowindow) {
if (!this.originPlaceId || !this.destinationPlaceId) {
return;
}
var me = this;
this.directionsService.route({
origin: {'placeId': this.originPlaceId},
destination: {'placeId': this.destinationPlaceId},
travelMode: this.travelMode
}, function(response, status) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
console.log(response);
me.computeTotals(map,response,infowindow);
//console.log(infowindow);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
/*Find Distance and Duration*/
AutocompleteDirectionsHandler.prototype.computeTotals = function(map,result,infowindow) {
var me = this;
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [result.request.origin],
destinations: [result.request.destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
console.log(response);
var distance = response.rows[0].elements[0].distance.text;
//convert meters in km then Miles
var meter = response.rows[0].elements[0].distance.value;
var distanceInMiles = (Number(meter)*0.00062137).toFixed(2);
var duration = response.rows[0].elements[0].duration.text;
infowindow.setContent('<i style="color:blue;" class="fa fa-car fa-2x"></i><center><b>'+distance+'( '+distanceInMiles+' miles) '+'<br>'+duration+'</b></center>');
infowindow.setPosition(map.getCenter());
infowindow.open(map);
} else {
alert("Unable to find the distance via road.");
}
});
}