我一直在尝试使用地理位置获取格式化地址几天。
我有一个点击按钮,可以根据纬度和经度检测位置。该位置将使用标记显示在地图上。此外,当检测到位置时,格式化的地址将传递给输入字段文本。
这是观点:
代码:
<div class="container-fluid">
<br>
<div class="row">
<div class="col-md-1">
<button class="btn btn-primary" onclick="getLocation()">Get Location</button>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="address" id="address" readonly>
</div>
<div class="col-md-offset-1 col-md-10">
<div id="map"></div>
</div>
</div>
</div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyA0Sdb3JYcx1VzhCO8iY48ynAHN-a0jQes"></script>
<script>
document.getElementById("address").setAttribute('value',address);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
alert('Geolocation is not supported by this browser');
}
}
function showPosition(geocoder,position,infowindow) {
var map = new google.maps.Map(document.getElementById('map'));
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
address.innerHTML=results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation")
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable")
break;
case error.TIMEOUT:
alert("The request to get user location timed out")
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred")
break;
}
}
</script>
我似乎无法完成这项工作。请帮我。谢谢。
更新:
document.getElementById("address").setAttribute('value',address);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert('Geolocation is not supported by this browser');
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lng);
var map = new google.maps.Map(document.getElementById('map'));
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
address.innerHTML=results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation")
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable")
break;
case error.TIMEOUT:
alert("The request to get user location timed out")
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred")
break;
}
}