Javascript 如何单独存储和更改坐标-谷歌地图API

我正在尝试制作一个程序，在那里我可以创建一些标记，然后将它们的坐标保存在HTML列表中。我的问题是HTML列表和标记没有相互链接，因此当标记被拖动到地图上的另一个位置时，显示的坐标不会改变

这是谷歌地图API的“标记脚本”

我知道这不起作用，因为它没有检查id。正如您所看到的，它为标记创建了一个id（编号），可以使用相同的编号/id将其“链接”到HTML列表。拖动标记时，相应的列表项应显示新的坐标。我只是不知道该怎么做

var currentId = 0;
var uniqueId = function() {
    return ++currentId;
};
var markers = {};
function placeMarker(location) {
    var id = uniqueId();
    var elements = document.getElementsByTagName("li");
    var marker = new google.maps.Marker({
        id : id,
        position : location,
        map : map,
        draggable : true,
        animation : google.maps.Animation.DROP
    });
    document.getElementById('checkpoint-textbox').value = id;
    document.getElementById('checkpoint-textbox').setAttribute("dataid", id--);
    document.getElementById('checkpoint-textbox').value = id;
    google.maps.event.addListener(marker, "dragend", function(event) {

        //I need the code here I think, to specify which list is modified by the dragged marker.

        document.getElementById("coords").innerHTML = 'Coordinates: '
            + event.latLng.lat() + ', ' + event.latLng.lng();

        }
    });
}

这是列表。

它是用另一个脚本创建的，但这并不重要，因为问题在于它如何更改现有坐标

<ol>
    <li id="coords" dataid="0">Coordinates: 20.000, 20.000</li>
    <li id="coords" dataid="1">Coordinates: 30.000, 30.000</li>
</ol>

坐标：20.000，20.000
坐标：30.000,30.000

---

目前，它显然只更改了上面的ID。

ID必须是唯一的，您对每个

使用相同的ID。
根据浏览器的不同，始终会选择第一个或最后一个

为元素指定唯一的id或通过其
dataid
-属性选择它们

google.maps.event.addListener(marker, "dragend", function(event) {

  document.querySelector('ol li[dataid="'+this.get('id')+'"]').innerHTML = 
    'Coordinates: ' + event.latLng.lat() + ', ' + event.latLng.lng();

});

很抱歉这么晚才回答，但这做得很好！非常感谢你！