[英]Pass updated lat & lng of google maps draggable marker to another page
我有一个谷歌地图,用户可以在地图上点击一个带有信息窗口形式的标记,在那里他们可以编辑数据并将数据保存到数据库中。 它类似于:
http://code.google.com/apis/maps/articles/phpsqlinfo_v3.html
但我已经让我的标记变得可以拖延了。 如何将更新的lat&lng传递到另一个PHP页面以更新数据库?
目前,我这样做:
function updateMarkerPosition(latLng)
{
document.getElementById('add_lat').value = latLng.lat();
document.getElementById('add_lng').value = latLng.lng();
}
function add_editable_mkr()
{
google.maps.event.addListener(map, 'click', function(event)
{
var marker_drag = new google.maps.Marker(
{
position: event.latLng,
draggable:true,
map: map,
icon: icon2
});
// Infowindow form
var html = '<div>'+
'<form name="add_data" action="phpinsert.php">'+
'<input type="text" name="add_lat" value=""/>'+
'<input type="text" name="add_lng" value=""/>'+
'</form>'+
'</div>';
var popup_form = new google.maps.InfoWindow
({
maxWidth:800
});
google.maps.event.addListener(marker_drag, "click", function()
{
popup_form.setContent(html);
popup_form.open(map, marker_drag);
});
google.maps.event.addListener(marker_drag, 'drag', function()
{
updateMarkerPosition(marker_drag.getPosition());
});
});
}
function initialize()
{
map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(1.364236,103.796082),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.LARGE
}
});
add_editable_mkr();
}
但是这些值作为空值传递给我的其他页面。 有没有其他方法可以做到这一点?
提前致谢!
在我看来你的文本输入没有id属性。 因此,您可以为它们提供id属性或通过表单引用它们
在设置HTML的地方尝试这个,让我知道它是怎么回事:
var html = '<div>'+
'<form name="add_data" action="phpinsert.php">'+
'<input type="text" name="add_lat" id="add_lat" value=""/>'+
'<input type="text" name="add_lng" id="add_lng" value=""/>'+
'</form>'+
'</div>';
好吧,想通了。 Google地图不只是将HTML放在文档上。 我不确定幕后会发生什么,但我认为它会以某种方式克隆内容。 似乎有2个输入标签,其id为add_lat。 所以,你必须通过它的类名来获取元素并以这种方式更新它。 这是文档中的第二个元素。 如果使用jQuery,则可以轻松更新页面上任何位置具有特定类名的所有元素。
此外,我发现你编写的代码会发生各种奇怪的事情。 因此,我很快将其重写为只有一个标记,并在地图上显示一个infowindow。 您可以单击标记以显示当前位置并拖动它以更新位置。
试试这个代码,让我知道你的想法。
function updateMarkerPosition(latLng)
{
document.getElementsByClassName('add_lat')[1].value = latLng.lat();
document.getElementsByClassName('add_lng')[1].value = latLng.lng();
}
function add_editable_mkr()
{
var popup_form = new google.maps.InfoWindow({
maxWidth:800
});
// Infowindow form
var html = '<div>'+
'<form name="add_data" action="phpinsert.php">'+
'<input type="text" class="add_lat" name="add_lat" value=""/>'+
'<input type="text" class="add_lng" name="add_lng" value=""/>'+
'</form>'+
'</div>';
popup_form.setContent(html);
var marker_drag = new google.maps.Marker(
{
position: map.getCenter(),
draggable:true,
map: map,
});
google.maps.event.addListener(marker_drag, "click", function()
{
popup_form.open(map, marker_drag);
updateMarkerPosition(marker_drag.getPosition());
});
google.maps.event.addListener(marker_drag, 'dragstart', function()
{
popup_form.close();
});
google.maps.event.addListener(marker_drag, 'dragend', function()
{
popup_form.open(map, marker_drag);
updateMarkerPosition(marker_drag.getPosition());
});
google.maps.event.addListener(map, 'click', function(event)
{
marker_drag.setPosition(event.latLng);
});
}
function initialize()
{
map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(1.364236,103.796082),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.LARGE
}
});
add_editable_mkr();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.