我正在实现Google Maps API的自动完成功能，以便它在该地址的坐标多边形内查找并验证该地址是否在其中。
问题在于它可以正常工作，直到我输入“ San Juan 2638”的地址（例如），并且如果我通过单击建议将其选中，结果就是一张地图在美国搜索，而应该在阿根廷的罗萨里奥。
希望您能为我提供帮助，因为我找不到错误
我把我正在做的完整代码留给你
JS：
/*=============================================
GOOGLE AUTOCOMPLETE + MAP
=============================================*/
function initAutocomplete() {
var pac_input = document.getElementById('registroDireccion');
var autocomplete_options = {
types: ['address'],
componentRestrictions: {country: "ar"}
};
/*=============================================
SELECTION OF FIRST SUGGESTION WHEN GIVING "ENTER"
=============================================*/
(function pacSelectFirst(input) {
// store the original event binding function
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
function addEventListenerWrapper(type, listener) {
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
// and then trigger the original listener.
if (type == "keydown") {
var orig_listener = listener;
listener = function(event) {
var suggestion_selected = $(".pac-item-selected").length > 0;
if (event.which == 13 && !suggestion_selected) {
var simulated_downarrow = $.Event("keydown", {
keyCode: 40,
which: 40
});
orig_listener.apply(input, [simulated_downarrow]);
}
orig_listener.apply(input, [event]);
};
}
_addEventListener.apply(input, [type, listener]);
}
input.addEventListener = addEventListenerWrapper;
input.attachEvent = addEventListenerWrapper;
var autocomplete = new google.maps.places.Autocomplete(input, autocomplete_options);
})(pac_input);
//var autocomplete = new google.maps.places.Autocomplete(input, options);
/*=============================================
VALIDATE ADDRESS WITHIN THE COORDINATE POLYGON
=============================================*/
// We create the instace bounds
var bounds = new google.maps.LatLngBounds();
// We extract the coordinates
var coords = [
{"lat": -32.9524231, "lng": -60.6682936},{"lat": -32.9719713, "lng": -60.67327},{"lat": -32.9741199, "lng": -60.6609489},{"lat": -32.9672002, "lng": -60.6591224},{"lat": -32.9717621, "lng": -60.6342073},{"lat": -32.9694741, "lng": -60.6335479},{"lat": -32.9715067, "lng": -60.6218164},{"lat": -32.9680472, "lng": -60.6205835},{"lat": -32.9630917, "lng": -60.6216094},{"lat": -32.958511, "lng": -60.6209314},{"lat": -32.9521298, "lng": -60.624212},{"lat": -32.9520442, "lng": -60.6251776},{"lat": -32.9503966, "lng": -60.6262076},{"lat": -32.9501265, "lng": -60.6256068},{"lat": -32.9462216, "lng": -60.6283345},{"lat": -32.9380717, "lng": -60.636903},{"lat": -32.9317529, "lng": -60.6468345},{"lat": -32.9265583, "lng": -60.6577651},{"lat": -32.9176559, "lng": -60.6700872},{"lat": -32.9182323, "lng": -60.6901178},{"lat": -32.9197859, "lng": -60.6891415},{"lat": -32.9284696, "lng": -60.6885702},{"lat": -32.9282011, "lng": -60.6780258},{"lat": -32.9294789, "lng": -60.6778898},{"lat": -32.9294001, "lng": -60.6743024},{"lat": -32.9333037, "lng": -60.6713756},{"lat": -32.9334751, "lng": -60.6734615},{"lat": -32.9351777, "lng": -60.6738827},{"lat": -32.9344493, "lng": -60.677983},{"lat": -32.9377555, "lng": -60.6788352},{"lat": -32.9360567, "lng": -60.6882969},{"lat": -32.9374164, "lng": -60.6886667},{"lat": -32.9364591, "lng": -60.6936267},{"lat": -32.9405789, "lng": -60.6936545},{"lat": -32.9481519, "lng": -60.6934212}
]
// We add the coordinate to the bounds
.map(function(coord) {
bounds.extend(coord);
return coord;
});
// We create the polygon
var area = new google.maps.Polygon({
paths: coords,
strokeColor: '#F99830',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#F99830',
fillOpacity: 0.30,
draggable: false
});
// We created the map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12.6,
center: bounds.getCenter(), // Centramos el mapa al area
mapTypeId: 'terrain',
disableDefaultUI: true
});
// We add the area to the map
area.setMap(map);
var geocoder = new google.maps.Geocoder();
jQuery(document).ready(function() {
$('#registroDireccion').on('change', function() {
var place = $(this).val().trim();
if (!place) {
return;
}
geocoder.geocode({
address: place
},
function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var result = results[0];
var marker = new google.maps.Marker({
position: result.geometry.location,
map: map,
label: place
});
if (google.maps.geometry.poly.containsLocation(result.geometry.location, area)) {
$("#registroDireccion").parent().before('<div class="alert alert-success"><strong>GREAT!</strong> Our delivery system arrives at your address.</div>');
} else {
$("#registroDireccion").parent().before('<div class="alert alert-success"><strong>WHAT EVIL!</Strong> Our delivery system does NOT arrive at your address.</div>');
document.getElementById("registroDireccion").value = "";
}
}
});
})
});
}
HTML
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="registroDireccion" name="registroDireccion" placeholder="Dirección de envío" required>
</div>
</div>
<div>
<button type="button" id="mostrarMapa" class="btn btn-default btn-xs pull-left">Mostrar zona de envío</button>
</div>
<div class="col-sm-12" id="map"></div>
SCRIPT API GOOGLE：
<script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyBDJVJOqxxr1PfcuzMZWYOut0lkGDW1YsU&libraries=places&callback=initAutocomplete" async defer></script>
答案 0 :(得分：0)
您发布的代码不是最少的...而且，如果您希望仅从该区域看到建议，那么我看不到您应将边界设置为“自动完成”。
下面是如何正确实施示例的示例。
strictBounds: true San Juan 2638并单击建议）
function initialize() {
var myLatLng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// We create the instace bounds
var bounds = new google.maps.LatLngBounds();
// We extract the coordinates
var coords = [
{
"lat": -32.9524231,
"lng": -60.6682936
}, {
"lat": -32.9719713,
"lng": -60.67327
}, {
"lat": -32.9741199,
"lng": -60.6609489
}, {
"lat": -32.9672002,
"lng": -60.6591224
}, {
"lat": -32.9717621,
"lng": -60.6342073
}, {
"lat": -32.9694741,
"lng": -60.6335479
}, {
"lat": -32.9715067,
"lng": -60.6218164
}, {
"lat": -32.9680472,
"lng": -60.6205835
}, {
"lat": -32.9630917,
"lng": -60.6216094
}, {
"lat": -32.958511,
"lng": -60.6209314
}, {
"lat": -32.9521298,
"lng": -60.624212
}, {
"lat": -32.9520442,
"lng": -60.6251776
}, {
"lat": -32.9503966,
"lng": -60.6262076
}, {
"lat": -32.9501265,
"lng": -60.6256068
}, {
"lat": -32.9462216,
"lng": -60.6283345
}, {
"lat": -32.9380717,
"lng": -60.636903
}, {
"lat": -32.9317529,
"lng": -60.6468345
}, {
"lat": -32.9265583,
"lng": -60.6577651
}, {
"lat": -32.9176559,
"lng": -60.6700872
}, {
"lat": -32.9182323,
"lng": -60.6901178
}, {
"lat": -32.9197859,
"lng": -60.6891415
}, {
"lat": -32.9284696,
"lng": -60.6885702
}, {
"lat": -32.9282011,
"lng": -60.6780258
}, {
"lat": -32.9294789,
"lng": -60.6778898
}, {
"lat": -32.9294001,
"lng": -60.6743024
}, {
"lat": -32.9333037,
"lng": -60.6713756
}, {
"lat": -32.9334751,
"lng": -60.6734615
}, {
"lat": -32.9351777,
"lng": -60.6738827
}, {
"lat": -32.9344493,
"lng": -60.677983
}, {
"lat": -32.9377555,
"lng": -60.6788352
}, {
"lat": -32.9360567,
"lng": -60.6882969
}, {
"lat": -32.9374164,
"lng": -60.6886667
}, {
"lat": -32.9364591,
"lng": -60.6936267
}, {
"lat": -32.9405789,
"lng": -60.6936545
}, {
"lat": -32.9481519,
"lng": -60.6934212
}
]
// We add the coordinate to the bounds
.map(function(coord) {
bounds.extend(coord);
return coord;
});
var ac = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode'],
bounds: bounds,
strictBounds: true
});
ac.addListener('place_changed', function() {
var place = ac.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map
});
map.panTo(place.geometry.location);
var html = '<div>Latitude: ' + place.geometry.location.lat() + '</div>';
html += '<div>Longitude: ' + place.geometry.location.lng() + '</div>';
document.getElementById('geometry').innerHTML = html;
});
}
initialize();#autocomplete {
width: 300px;
}
#geometry {
margin: 10px 0;
background: yellowgreen;
padding: 10px 20px;
}
#map-canvas {
height: 300px;
}<input id="autocomplete" placeholder="Enter your address" type="text"></input>
<div id="geometry">
</div>
<div id="map-canvas">
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
您可能需要使用有效的API密钥来摆脱警告并获得预期的结果。