如何解决Google Maps API-自动填充地址只能使用一次？ ASP.NET/jQuery/HTML
我有一个带有模态的程序，模态内有一个地址栏和几个（禁用的）形式控制输入。使用地址栏时，会给出自动完成建议，并且一旦用户选择了他们的地址，表单控件就会输入自动完成以及与搜索到的地址相关的信息。用于此类功能的jQuery是从https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
获得的我有3个独立的模态，但是所有这些模态都应该做同样的事情，因为它只代表其中一个起作用。我试图重命名HTML部分中的所有变量（通过添加1），并且我重复了jQuery代码（也通过向所有重复变量添加1）。 chrome控制台不会引发任何错误，并且代码可以按预期进行编译，但是对于其他两个模式，自动完成功能根本无法工作。
第一个模态（其代码的一部分）有效：
<div id="locationField">
<input id="autocomplete1" class="form-control" placeholder="Enter your address" onFocus="geolocate1()" type="text" />
</div>
<br />
<div>
<img class="map-image" src="~/Images/yellow-map.PNG" />
</div>
<div>
<label class="label-address">Street address</label>
<input class="form-control" id="street_number1" style="text-align: left" readonly />
<input class="form-control" id="route1" readonly />
<label class="label-address">City</label>
<input class="form-control" id="locality1" readonly />
<label class="label-address">Province</label>
<input class="form-control" id="administrative_area_level_11" readonly />
<label class="label-address">Zip Code</label>
<input class="form-control" id="postal_code1" readonly />
<label class="label-address">Country</label>
<input class="form-control" id="country1" readonly />
</div>
适用于该模式的jQuery代码（从上述链接复制）：
//Autocomplete Address Form (DONATOR)
var placeSearch,autocomplete;
var componentForm = {
street_number: 'short_name',route: 'long_name',locality: 'long_name',administrative_area_level_1: 'short_name',country: 'long_name',postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object,restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'),{ types: ['geocode'] });
// Avoid paying for data that you don't need by restricting the set of
// place fields that are returned to just the address components.
autocomplete.setFields(['address_component']);
// When the user selects an address from the drop-down,populate the
// address fields in the form.
autocomplete.addListener('place_changed',fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = {
lat: position.coords.latitude,lng: position.coords.longitude
};
var circle = new google.maps.Circle(
{ center: geolocation,radius: position.coords.accuracy });
autocomplete.setBounds(circle.getBounds());
});
}
}
不起作用的第二模态（其代码的一部分）：
<div id="locationField">
<input id="autocomplete1" class="form-control" placeholder="Enter your address" onFocus="geolocate1()" type="text" />
</div>
<br />
<div>
<img class="map-image" src="~/Images/yellow-map.PNG" />
</div>
<div>
<label class="label-address">Street address</label>
<input class="form-control" id="street_number1" style="text-align: left" readonly />
<input class="form-control" id="route1" readonly />
<label class="label-address">City</label>
<input class="form-control" id="locality1" readonly />
<label class="label-address">Province</label>
<input class="form-control" id="administrative_area_level_11" readonly />
<label class="label-address">Zip Code</label>
<input class="form-control" id="postal_code1" readonly />
<label class="label-address">Country</label>
<input class="form-control" id="country1" readonly />
</div>
无法使用的模式的jQuery代码（从上述链接复制）：
var placeSearch1,autocomplete;
var componentForm1 = {
street_number1: 'short_name',route1: 'long_name',locality1: 'long_name',administrative_area_level_11: 'short_name',country1: 'long_name',postal_code1: 'short_name'
};
function initAutocomplete1() {
// Create the autocomplete object,restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete1'),fillInAddress1);
}
function fillInAddress1() {
// Get the place details from the autocomplete object.
var place1 = autocomplete.getPlace();
for (var component1 in componentForm1) {
document.getElementById(component1).value = '';
document.getElementById(component1).disabled = false;
}
// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.
for (var i1 = 0; i1 < place1.address_components.length; i1++) {
var addressType1 = place1.address_components[i1].types[0];
if (componentForm1[addressType1]) {
var val1 = place1.address_components[i1][componentForm1[addressType1]];
document.getElementById(addressType1).value = val1;
}
}
}
// Bias the autocomplete object to the user's geographical location,// as supplied by the browser's 'navigator.geolocation' object.
function geolocate1() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var geolocation = {
lat: position.coords.latitude,radius: position.coords.accuracy });
autocomplete.setBounds(circle.getBounds());
});
}
}
我认为问题出在重复的jQuery代码中？否则，我不确定。一些指导将不胜感激。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。