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.
}

ref：in-place Update Leaflet GeoJSON feature

希望有帮助

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

1 个答案: