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

时间:2013-12-30 07:21:58

标签: google-maps google-maps-api-3 google-maps-markers

我正在尝试创建简单的Map应用程序,以在地图上显示我们的字段捕获点。到目前为止,我在json文件中有所有数据,我可以在Map上显示它们。请看看这个 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());
});
}

我收到此错误:

  

未捕获的TypeError:无法读取未定义的属性“位置”

1 个答案:

答案 0 :(得分:1)

您应该使用marker.position

而不是marker.getPosition()

此处的代码中,您在单击处理程序函数中引用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');
    });
}