从地图中获取标记的 X 和 Y 值

Question

我正在尝试创建简单的地图应用程序以在地图上显示我们的现场捕获点。到目前为止，我将所有数据都保存在一个 json 文件中，并且我能够在地图上显示它们。请看一下这个 DEMO
我想要做的是编辑地图上的 X Y 坐标，所以我需要
1- 从现有标记中获取 X Y 地图并将它们显示在表格上
2-点击相关标记时，关注表中相关的<tr>
3- 随着标记位置的更新，表中的相关数据也会更新。

我已经试过了：

$('.'+marker.id).html('<td>'+ marker.title +'</td><td>'+ marker.position.lat()+'</td><td>'+ marker.position.lng()+'</td>');  });
$('#myTable tbody:eq(1)').append('<tr class='+marker.id+'><td>'+ marker.title +'</td><td>'+ marker.position.lat()+'</td><td>'+ marker.position.lng()+'</td></tr>'); });

但它没有工作！你能告诉我怎么做吗？

更新： 我试图提醒标记之一的 lat() 为：

locations.length = 0;
for (p = 0; p < data.markers.length; p++) {
var marker = new google.maps.Marker({
 position: new  google.maps.LatLng(data.markers[p].latitude,data.markers[p].longitude),
 map: map,
 title:"marker "+p
 });

 $( "button" ).click(function() {
    alert(marker[1].position.lat());
});
}

我收到此错误：

未捕获的类型错误：无法读取未定义的属性“位置”

Answer 1

您应该使用marker.getPosition()，而不是使用marker.position

同样在此代码中，您在点击处理函数中引用marker[1]，就好像它是一个数组，但它不是。

for (p = 0; p < data.markers.length; p++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
        map: map,
        title: "marker " + p
    });

    $("button").click(function () {
        alert(marker[1].position.lat());
    });
}

基本上你想说的是，对于每一个<button>，当点击时，我想提醒每个标记的位置。这有点愚蠢（而且这段代码无论如何也不起作用）。

在与 OP 进行一些在线聊天以澄清要求后，这是一个更新的答案

for (p = 0; p < data.markers.length; p++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
        map: map,
        draggable: true,
        title: "marker " + p,
        id: p
    });

    $('#myTable tbody:eq(1)').append('<tr class=' + marker.id + '><td>' + marker.title + '</td><td>' + data.markers[p].latitude + '</td><td>' + data.markers[p].longitude + '</td></tr>');

    bindMarker(marker);
}

function bindMarker(marker) {
    google.maps.event.addListener(marker, 'dragend', function () {
        $('tr.' + this.id).html('<td>' + this.title + '</td><td>' + this.getPosition().lat() + '</td><td>' + this.getPosition().lng() + '</td>');
    });

    google.maps.event.addListener(marker, 'click', function () {
        // turn off the highlighting on whichever row had it previously 
        $('tr.highlighted').removeClass('highlighted');

        // and add it to this marker's row 
        $('tr.' + this.id).addClass('highlighted');
    });
}