[英]How to display the desired elements from Google Maps API reverse geocoding?
我想使用Google Maps API反向地理編碼顯示特定結果。 我要在控制台中輸入想要的內容,但是在將其顯示在顯示屏中時卻空白。
另外,我無法獲取表單字段來填充數據。 它填充在
標記,但不進入表格
Codepen: https ://codepen.io/Strawmr/pen/yLBXZVR
JS
(function() {
var geocoder = new google.maps.Geocoder(),
locElement = document.querySelector("#loc"),
google_coords;
navigator.geolocation.getCurrentPosition(function(e) {
google_coords = new google.maps.LatLng(
e.coords.latitude,
e.coords.longitude // current address
);
geocoder.geocode({ latLng: google_coords },
reverseGeocoderSuccess);
});
function reverseGeocoderSuccess(results, status) {
var address;
if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
var address_components =
results[0].address_components;
address = results[0].formatted_address;
locElement.innerHTML = address;
// print desired result to the console:
console.log(
address_components[3].short_name + ", " +address_components[5].short_name + " " + address_components[7].long_name + ", " + address_components[6].long_name
);
}
}
}
})();
的HTML
<div class="container-fluid">
<form class="form-horizontal" role="form">
<fieldset class="address">
<legend>Address</legend>
<div class="form-group">
<label class="control-label col-sm-2 col-md-3">
Location
</label>
<div class="col-sm-4 col-md-3">
<input class="form-control" type="text" id="loc" name="Location" value="" autocomplete="address-level2">
</div>
</div>
</fieldset>
</form>
要使結果顯示在表單輸入框中,您可以替換
locElement.innerHTML = address;
與
document.getElementById("loc").value = address;
要顯示具有該位置的Google Map(我認為這是您要嘗試的操作),您必須創建一個Map對象,並為其提供地址坐標的中心。 就像是:
const map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng()
},
zoom: 8,
});
為了使上述方法起作用,您還需要在HTML中添加一個ID為map的div:
<div id='map'></div>
然后,您還可以將標記,彈出框等添加到地圖對象。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.