我正在尝试创建简单的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:无法读取未定义的属性“位置”
答案 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');
});
}