Leaflet - 如何使用弹出表单中的数据创建标记

Question

我开始使用 javascript，并试图解决这个问题。

我希望在用户单击地图时出现一个表单。当他们填写表单时，我想在该位置创建一个标记，并将该标记的弹出内容设置为表单中的值。一旦他们完成添加表单，我也会将表单数据发送到数据库。

表单有效，但我不知道如何从处理表单提交的函数访问弹出位置数据。

这是我的代码：

function onMapClick(e) {
    popLocation = e.latlng;
    var popup = L.popup({
        closeButton: true})
        .setLatLng(e.latlng)
        .setContent(popupForm)
        .openOn(map);

     $("#popup-form").submit(function(e){
         e.preventDefault();
         console.log(e);
         var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "type": $("input[name='goodBad']:checked").val(),
                "location":  L.DomUtil.get('location').value,
                "reason": L.DomUtil.get('reason').value,
                "improve": L.DomUtil.get('improve').value
            },
            "geometry": {
                "type": "Point",
                "coordinates": popLocation
            }
        };

        L.geoJson(geojsonFeature, {
            pointToLayer: function (feature, latlng) {
                marker = L.marker(geojsonFeature.geometry.coordinates, {
                    icon: L.AwesomeMarkers.icon({icon: 'info', prefix: 'fa', markerColor: markCol}),
                    riseOnHover: true,
                    draggable: true //define the content to be added to the marker
                }).bindPopup(popupForm);
                marker.on("popupopen", onPopupOpen);
                openOn(map);
                return marker;
            }
        }).addTo(map);
        map.closePopup();
     });

需要的表格在这里：

var popupForm = '<form id="popup-form" class="form-container"> \
                <h2>Add a point:</h2>\
                <strong> The air quality here is: </strong> <br> \
                <label for="type">Good</label> \
                <input type="radio" name="goodBad" value ="good" id="good"> \
                <label for="type">Bad </label> \
                <input type="radio" name="goodBad" value = "bad" id="bad"> \
                    <br><br></c> \
                <label for="location"><b>Location Name</b></label> \
                <input type="text" placeholder="eg. Redbridge flyover" id="location" > \
                <label for="reason"><b>Why are you adding this point? - be specific!</b></label> \
                <input type="text" placeholder="eg. There is a traffic jam every saturday 11am" id="reason" > \
                <label for="solution"><b>How would you improve air quality at this location? <br>(If you ran the city)</b></label> \
                <input type="text" placeholder="eg. I\'d close the road when when school starts and stops" id="improve"> \
                <button type="submit" id="btn-submit" class="btn">Save</button> \
                <input type="hidden" id= "hiddenField" name="id" value="" /> \
            </form>';

非常感谢

Answer 1

我将通过以下步骤解决此问题：

1) 通过 geoJSON 渲染所有点/标记，我们暂时称它为 foobarJSON。

2) 在点击事件时，捕捉地图被点击的坐标。

3) 然后将该坐标附加到 foobarJSON 并使用新版本的 foobarJSON 更新传单

4) 使用新坐标更新数据库

对于第 3 步，这样的事情可能会起作用：

function updateFeature(updatedGeoJsonData) {
  var updatedFeature = myFeaturesMap[updatedGeoJsonData.properties.objectID];
  updatedFeature.clearLayers(); // Remove the previously created layer.
  updatedFeature.addData(updatedGeoJsonData); // Replace it by the new data.
}

参考：in-place Update Leaflet GeoJSON feature

希望有帮助