傳單-如何使用彈出表單中的數據創建標記

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

參考： 就地更新傳單GeoJSON功能

希望能有所幫助