Как я могу использовать модальное окно для добавления точки с комментарием к карте листовки?

Question

Я пытаюсь использовать листовку для создания карты, на которой пользователь может оставить комментарий к месту. Пользователь должен иметь возможность щелкнуть карту, чтобы вызвать модальное окно, предлагающее ввести комментарий. Точка / маркер должны быть добавлены на карту, если они нажимают кнопку «Сохранить» в модальном окне.

Моя проблема в том, что если пользователь 1) щелкает карту, 2) нажимает «Отмена» в модальном окне , 3) снова щелкает карту и 4) на этот раз нажимает кнопку «Сохранить», после чего все точки добавляются на карту (включая те, где пользователь нажал «Отмена»). Как я могу это исправить, чтобы на карту (и слой geo JSON) добавлялась только одна точка, если пользователь нажимает кнопку «Сохранить»?

Примечание. Как только я выясню эту проблему, я будет работать, принимая ввод из элемента textarea (комментарий) в модальном окне и добавляя его к объекту geo JSON.

Живой пример проблемы: https://sandbox.roylwells.com/leaflet/maptest3

Мой HTML:

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <h3>Leave a comment</h3>
        <p>Some text in the Modal..</p>
        <form>
            <textarea id="comment" name="comment" maxlength="200">Enter your comment</textarea>
        </form>
        <button id="saveButton">Save</button>
        <button id="cancelButton">Cancel</button>
    </div>

</div>

Мой Javascript код:

// create empty geojson feature collection
    var comments = {
        type: 'FeatureCollection',
        features: []
    };

    // create geojason layer object
    var commentPoints = L.geoJson(comments, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.comment);
        }
    }).addTo(map);


    // add marker to map & print LatLng coordiantes in console onclick 
    function onMapClick(e) {

        // set comment variable
        var comment = "placholder for comment";

        // get comment from user
        //var comment = getComment();

        // Open the comment modal 
        $( "#myModal" ).show();

        // Save comment and add GeoJSON when user clicks the Save button
        $( "#saveButton" ).click(function() {

            // create temporarpy geojson object
            var commentPoint = {
                "type": "Feature",
                "id": null, // null for now
                "geometry": {
                    "type": "Point",
                    "coordinates": [e.latlng.lng, e.latlng.lat] //get coordinates from latlng
                },
                "properties": {
                    "name": "John Doe",
                    "comment": comment
                }
            };

            //console.log(commentPoint);
            commentPoints.addData(commentPoint);

            //close the modal
            $( "#myModal" ).hide();

        });


        // Get the <span> element that closes the modal. When the user clicks on <span> (x) or cancle button, close the modal
        $( "#myModal .close, #cancelButton" ).click(function() {

            // close the modal
            $( "#myModal" ).hide();

        });

        // Get the modal. When the user clicks anywhere outside of the modal, close it
        var modal = document.getElementById("myModal");

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

    }

    // calls onMapClick function when user clicks the map
    map.on('click', onMapClick);

Answer 1

Измените свой код на:

$( "#saveButton" ).off().click(function() {

Проблема возникает из-за того, что вы добавляете несколько событий щелчка в диалоговое окно / кнопку сохранения. Поэтому, когда вы сохраняете второй маркер, вы также вызываете функцию для сохранения первого.