Django 德扬戈。Google Place自动完成地址表单
我有一个模板中的表单，用户可以在其中输入地址。我想应用“地点自动完成地址”使用谷歌API 然而，由于某些原因，自动完成函数不适用于表单。任何建议都将被告知。多谢各位 Forms.pyDjango 德扬戈。Google Place自动完成地址表单,django,autocomplete,google-api,django-forms,django-templates,Django,Autocomplete,Google Api,Django Forms,Django Templates,我有一个模板中的表单，用户可以在其中输入地址。我想应用“地点自动完成地址”使用谷歌API 然而，由于某些原因，自动完成函数不适用于表单。任何建议都将被告知。多谢各位 Forms.py where_load = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"})) where_unload = forms.CharField(max_length=100, widget=forms.
where_load = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"}))
where_unload = forms.CharField(max_length=100, widget=forms.TextInput(attrs={'id':"autocomplete"}))
<head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&libraries=places&callback=initAutocomplete" async defer></script> </haed>
<body>
....
<div class="col-sm-37">
{{form.where_load|as_crispy_field}}
</div>
<div class="col-sm-37">
{{form.where_unload|as_crispy_field}}
</div>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete;
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_geolocation]
// 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());
});
}
}
// [END region_geolocation]
</script>
</body>
....
{{form.where|u load|as_crispy_field}}
{{form.where|u unload|as_crispy_field}}
//此示例使用自动完成功能显示地址表单
//谷歌的PlacesAPI帮助用户填写信息。
var placeSearch，自动完成；
函数initAutocomplete（）{
//创建自动完成对象，将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{！HTMLInputElement}*/（document.getElementById（'autocomplete'），
{类型：['geocode']}）；
//当用户从下拉列表中选择地址时，填充该地址
//表单中的字段。
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
//[起始区域\地理位置]
//将自动完成对象偏移到用户的地理位置，
//由浏览器的“navigator.geolocation”对象提供。
函数geologite（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
变量地理位置={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
var circle=new google.maps.circle({
中心：地理定位，
半径：位置、坐标、精度
});
autocomplete.setBounds（circle.getBounds（））；
});
}
}
//[终端区域\地理位置]
<script>
var onLoaded = function() {
// I am assuming your field has id of where_load, it might be different
var location_input = document.getElementById('where_load');
var autocomplete = new google.maps.places.Autocomplete(location_input);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{api_key}}&libraries=places&callback=onLoaded" async defer></script>
var onload=函数（）{
//我假设您的字段具有加载位置的id，可能会有所不同
var location_input=document.getElementById（'where_load'）；
var autocomplete=new google.maps.places.autocomplete（位置输入）；
}