通过更新的lat&；谷歌的lng将可拖动标记映射到另一个页面 - 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>';

好吧，想通了。谷歌地图不仅仅把HTML放在文档上。我不确定幕后会发生什么，但我认为它以某种方式复制了内容。似乎有两个id为add_lat的输入标签。因此，您必须根据元素的类名来获取它，并以这种方式更新它。这是文档中的第二个元素。如果您使用jQuery，您可以很容易地更新页面上任何位置具有特定类名的所有元素。

此外，我发现你写的代码会发生各种奇怪的事情。所以，我很快重写了它，在地图上只有一个标记和一个信息窗口。可以单击标记以显示当前位置，然后拖动标记以更新位置。

试试这个代码，让我知道你的想法。

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