javascript - 在Google map 上获取标记的坐标

我正在尝试将Google地图上两个标记的纬度和经度传递到某些文本框。我遵循了一些建议使用的指南：

google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});

和

var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

但是，我的文本框没有填充任何东西。

谷歌地图代码（模糊了密钥，但是因为我可以访问地图，所以可以正常工作）：

<div class="content">
<div class="map" id="map"></div>
<script>
function initMap() {
var cpe = {lat: -20.269401 , lng: 57.497840};
var pl = {lat: -20.187042 , lng: 57.498377};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: cpe
});
var marker = new google.maps.Marker({
position: cpe,
map:map,
draggable:true,
label: "P"


});

ar infowindow = new google.maps.InfoWindow({
content: "Pickup Point"
});

marker.addListener('mouseover', function() {
infowindow.open(map, marker);
});

var marker2 = new google.maps.Marker({
position: pl,
map:map,
draggable:true,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'

});


var infowindow2 = new google.maps.InfoWindow({
content: "Drop-Off Point"
});



marker2.addListener('mouseover', function() {
infowindow2.open(map, marker2);
});
}

google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("fromlat").value = this.getPosition().lat();
document.getElementById("fromlng").value = this.getPosition().lng();
});

google.maps.event.addListener(marker2, 'dragend', function (event) {
document.getElementById("tolat").value = this.getPosition().lat();
document.getElementById("tolng").value = this.getPosition().lng();
});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=*****&callback=initMap">
</script>

</div>

文字框：

enter code here
<div class="row">
<div class="col-sm-3">
<fieldset>
<input type="text" id="fromlat" name="fromlat" placeholder="Pickup Latitutde(Auto)"/>
</fieldset>
<fieldset>
<input type="text" id="fromlng" name="fromlng" placeholder="Pickup Longitude(Auto)"/>
</fieldset>
</div>
<div class="col-sm-3">
<fieldset>
<input type="text" id="tolat" name="tolat" placeholder="Destination Latitude(Auto)"/>
</fieldset>
<fieldset>
<input type="text" id="tolng" name="tolng" placeholder="Destination Longitude(Auto)"/>
</fieldset>
</div>

最佳答案

您只需要在initMap（）函数下定义事件函数
这是脚本代码。
请检查

<script>
var map;
function initMap() {
var cpe = {lat: -20.269401 , lng: 57.497840};
var pl = {lat: -20.187042 , lng: 57.498377};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: cpe
});
var marker = new google.maps.Marker({
position: cpe,
map:map,
draggable:true,
label: "P"


});
var infowindow = new google.maps.InfoWindow({
content: "Pickup Point"
});

marker.addListener('mouseover', function() {
infowindow.open(map, marker);
});

var marker2 = new google.maps.Marker({
position: pl,
map:map,
draggable:true,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'

});


var infowindow2 = new google.maps.InfoWindow({
content: "Drop-Off Point"
});



marker2.addListener('mouseover', function() {
infowindow2.open(map, marker2);
});

google.maps.event.addDomListener(marker, 'dragend', function (event) {
document.getElementById("fromlat").value = this.getPosition().lat();
document.getElementById("fromlng").value = this.getPosition().lng();
});

google.maps.event.addDomListener(marker2, 'drag', function (event) {
document.getElementById("tolat").value = this.getPosition().lat();
document.getElementById("tolng").value = this.getPosition().lng();
});


}
</script>

关于javascript - 在Google map 上获取标记的坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42882317/