javascript - 如何单独存储和更改坐标 - Google Maps API

Question

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

这是 Google Maps 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>

目前，它显然只改变了上面的一个。

Answer 1

ID 必须是唯一的，每个 <li/> 使用相同的 ID 。 取决于浏览器，始终是第一个或最后一个 <li/>将被选中。

为元素提供唯一的 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();

});