顯示地圖座標在輸入字段

Question

我有兩個輸入字段和一個地圖在他們下面，我想要做的是顯示經度和緯度，當我點擊地圖上的任何位置時，我該怎麼做？這裏是我的代碼：

#map { 
 
    width: 100%; 
 
    height: 250px; 
 
}

<div class="form-group"> 
 
    <label for="exampleInputEmail1">Latitude</label> 
 
    <input placeholder="Latitude"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputEmail1">Longitude</label> 
 
    <input placeholder="Longitude"> 
 
    </div> 
 

 
<div id="map"></div> 
 
<script> 
 
    function myMap() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.5, -0.12), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    } 
 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 1

您可以點擊地圖事件偵聽器。下面

是針對

google.maps.event.addListener(map, 'click', function(event) { 

    alert(event.latLng); 

}); 

#map { 
 
    width: 100%; 
 
    height: 250px; 
 
}

<div class="form-group"> 
 
    <label for="exampleInputEmail1">Latitude</label> 
 
    <input placeholder="Latitude" id="lat"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleInputEmail1">Longitude</label> 
 
    <input placeholder="Longitude" id="lang"> 
 
    </div> 
 

 
<div id="map"></div> 
 
<script> 
 
    function myMap() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.5, -0.12), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.HYBRID 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    
 
    google.maps.event.addListener(map, 'click', function(event) { 
 

 
    
 
    var myLatLng = event.latLng; 
 
    var lat = myLatLng.lat(); 
 
    var lng = myLatLng.lng(); 
 
     
 
     document.getElementById("lat").value = lat; 
 
     document.getElementById("lang").value = lng; 
 
    
 
}); 
 
    
 
    
 
    } 
 
    
 
    
 
</script> 
 
<script> 
 

 
</script> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> 
 

 
<script> 
 
    
 
</script>

注意代碼：沒有API密鑰，您不能使用谷歌地圖。這個用法是免費的，直到您的應用程序在連續90天內每天達到25000個電話爲止。