在自动完成的地图上搜索无法按预期工作

Question

我正在实现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>

脚本API GOOGLE：

<script src="https://maps.googleapis.com/maps/api/js?library=geometry&key=AIzaSyBDJVJOqxxr1PfcuzMZWYOut0lkGDW1YsU&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

您发布的代码不是最小的。。。我看不出你在哪里设置了自动完成的界限，如果你只希望看到来自这一领域的建议，你应该这样做。

下面是一个如何以正确方式实现它的示例。

1. 根据坐标创建边界对象
2. 将bounds对象应用于自动完成，并使用strictBounds: true将搜索限制在此区域
3. 按照您在问题中的建议进行尝试(输入San Juan 2638并单击建议(
4. 它创建了一个标记，并将地图平移到位于AR罗萨里奥的位置

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密钥来消除警告并获得预期结果。