Question

我道歉，但这是一个初学者的问题（我是一个）。我正在开发一个jQuery Mobile应用程序，而且我正在努力处理我想要保存的表单数据。地图工作正常，标记，但这是问题。我添加了两个事件监听器：

JS

   google.maps.event.addListener(Marker, 'click',

   function (e) {
   addLocations(this.getPosition());
   });

   google.maps.event.addListener(Marker, 'dragend',

   function () {
   google.maps.event.trigger(this, 'click');
   });

这将打开一个弹出窗口，显示输入某些数据的位置。这是弹出窗口

     <div data-role="popup" id="popupMenu" data-theme="a" class="ui-corner-all" data-transition="slidedown" data-position-to="#homeHeader" data-overlay-theme="e">
<form id="locDataColletion">
    <div style="padding:10px 20px">
         <h3>Please Enter Location Info</h3>

        <label for="location">Location:</label>
        <input type="text" name="location" id="location" value="" placeholder="Location Name" data-theme="a">
        <label for="note">Note:</label>
        <textarea cols="40" rows="8" name="textarea" id="note" value="" placeholder="Enter Notes or Reminder" data-theme="a"></textarea>

添加位置取消

弹出窗口按预期打开，但现在一切都出错了。点击提交按钮后，我想将表单数据和位置保存在数组中。这是JS

function addLocations(location) {

$('#popup-anchor').trigger("click");

$('#location, #note').val("");
$('#latitude').html('<b>Latitude: </b>' + location.lat());
$('#longitude').html(' <b>Longitude: </b>' + location.lng());

$(document).on('submit', '#locDataColletion', function (event) {
    pointCount++;
    pointsArray.push({
        'Location': $('#location').val(),
            'addedPoint': pointCount,
            'lat': location.lat(),
            'lng': location.lng(),
            'Note': $('#note').val()
    });
    console.log(JSON.stringify(pointsArray));
});}

我提交表单信息后，数据被正确推送到＆＃34; pointsArray＆＃34;，但是当我选择另一个标记并执行相同的操作时，第一个条目会自动复制。这是结果的一个例子：

[
{
    "Location": "aa",
    "addedPoint": 1,
    "lat": 25.889457707750903,
    "lng": -80.29134750366211,
    "Note": "bb"
},
{
    "Location": "bb",
    "addedPoint": 2,
    "lat": 25.889457707750903,
    "lng": -80.29134750366211,
    "Note": "bb"
},
{
    "Location": "bb",
    "addedPoint": 3,
    "lat": 25.8842454748656,
    "lng": -80.29490947723389,
    "Note": "bb"
}]

正如您所看到的，我输入了＃34; aa＆＃34;，提交数据，一切都很顺利，但当我输入＆＃34; bb＆＃34;时，创建了两个条目，一个从中提取数据前一个条目和第二个条目具有第二个标记的正确位置。我知道这是一个很长的问题，但它让人发疯。如果解决方案需要更多详细信息，请告知我们。谢谢！

Answer 1

您在submit函数中乘以addLocations事件侦听器。无论何时运行该函数，都要复制submit内的代码。

您可以将其保留原样，只需确保删除以前的绑定.off()，然后重新绑定.on()。

$(document)
    .off('submit', '#locDataColletion')
    .on('submit', '#locDataColletion', function (event) {
    // your code
});

或者，将其移到addLocations函数之外，并将location对象传递给全局变量。

var pointCount = 0,
    pointsArray = [],
    locationObject;

function addLocations(location) {
    locationObject = location;
    $("#popupMenu").popup("open"); // open popup

    $('#location, #note').val("");
    $('#latitude').html('<b>Latitude: </b>' + location.lat());
    $('#longitude').html(' <b>Longitude: </b>' + location.lng());
}

$(document).on('submit', '#locDataColletion', function (event) {
    event.preventDefault(); // prevent page from reloading
    pointCount++;
    pointsArray.push({
        'Location': $('#location').val(),
            'addedPoint': pointCount,
            'lat': locationObject.lat(),
            'lng': locationObject.lng(),
            'Note': $('#note').val()
    });
    console.log(JSON.stringify(pointsArray));

    $(this).closest(".ui-popup").popup("close"); // close popup
});

我测试你的代码并且运行良好;检查此fiddle。

Google地图标记可将数据保存在数组中

1 个答案: