Question

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

这是Google Maps API的“标记脚本”

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

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();

});

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

1 个答案: