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

Question

抱歉，这是一个初学者的问题（我就是其中之一）。我正在开发一个 jQuery 移动应用程序，我正在努力处理我试图保存的表单数据。地图和标记工作正常，但这就是问题所在。我添加了两个事件监听器：

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

一旦我提交表单信息，数据就会被正确推送到 "pointsArray"，但是当我 select 另一个标记并执行相同的操作时，第一个条目会自动复制。这是结果的示例：

[
{
    "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"
}]

如你所见，我输入"aa"，提交数据，一切正常，但是当我输入"bb"时，创建了两个条目，一个从上一个条目中提取数据，第二个具有第二个标记的正确位置。我知道这是一个很长的问题，但它让人发疯。如果解决方案需要更多详细信息，请告诉我。谢谢！

Answer 1

您正在 addLocations 函数内乘以 submit 事件侦听器。每当您运行该函数时，您都会复制 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 地图标记将表单数据保存在数组中

Google Maps markers saving form data in an array

arrays

json

google-maps

jquery-mobile