感謝。私は問題を解決し、私はちょうど完全なコードを追加しています、ここに誰かがそれを必要とするかもしれません。
オートコンプリートアドレス用の2つの入力ボックス、場所の検索、およびスクリプトが、選択した場所がポリゴンの内側にあるかどうかを検索します。ポリゴンはユーザーには表示されません。私はそれを望んでいないので、表示する場合は、この行のコメントを削除してください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.");
}
});
}
[本](http://www.geocodezip.com/geoxml3_test/v3_collection-map2e.html)のようなもの、または[ this](http://www.geocodezip.com/v3_collection-map2e_FT.html)? – geocodezip
この場所を検索すると、「I-285、Atlanta、GA、USA」地図に「285」の番号が付いた境界エリアが表示されます。私はその地域の座標を欲しい –