我在网上找不到解决我的问题的方法,所以我请求你的帮助。
尝试使用谷歌地址自动完成API。我使用asp。净核心。
在razor中,我有:
@section Scripts{
<script src="~/scripts/common/google-location.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[Placed my key]&libraries=places"
async defer></script>
}
<div id="subConstractorsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group modal-errors">
<div class="alert alert-danger">
<strong>Error!</strong>
<ul></ul>
</div>
</div>
</div>
</div>
<div class="row default-row">
<div class="col-md-6 name-box top-left">
<label class="control-label">Name</label>
<div>
<input type="text" placeholder="Name" class="form-control input-sm">
</div>
</div>
<div class="col-md-6 is-active-box top-right">
<label class="control-label">Active</label>
<div>
<input type="checkbox" class="form-control input-sm">
</div>
</div>
</div>
<br />
<div class="row default-row">
<div class="form-group col-md-12">
<div id="locationField">
<label>Address:</label>
<input class="form-control input-sm" id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" />
</div>
</div>
</div>
<div class="row default-row">
<div class="form-group col-md-1">
<label>Street Number:</label>
<input class="form-control input-sm" id="street_number" readonly />
</div>
<div class="form-group col-md-2">
<label>Street:</label>
<input class="form-control input-sm" id="route" readonly />
</div>
<div class="form-group col-md-2">
<label>City:</label>
<input class="form-control input-sm" id="locality" readonly />
</div>
<div class="form-group col-md-2">
<label>State:</label>
<input class="form-control input-sm" id="administrative_area_level_1" readonly />
</div>
<div class="form-group col-md-2">
<label>Post code:</label>
<input class="form-control input-sm" id="postal_code" readonly />
</div>
<div class="form-group col-md-2">
<label>Country:</label>
<input class="form-control input-sm" id="country" readonly />
</div>
<input type="hidden" id="longitude" />
<input type="hidden" id="lattitude" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
在我的js文件中,我有以下代码:
$(function() {
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 to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
(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);
}
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;
$("#" + component).prop('readonly', false);
}
var location = place.geometry.location;
var lattitude = location.lat();
var longitude = location.lng();
$("#lattitude").val(parseFloat(lattitude.toFixed(8)));
$("#longitude").val(parseFloat(longitude.toFixed(8)));
// Get each component of the address from the place details
// and fill 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());
});
}
}
});
我有一个错误:
Uncaught ReferenceError: geolocate is not defined
