Leaflet -如何使用弹出表单中的数据创建标记
Leaflet -如何使用弹出表单中的数据创建标记
提问于 2018-12-12 05:43:55
我从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>';非常感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-12 06:06:31
我将通过以下步骤来解决这个问题：
1)通过geoJSON渲染所有点/标记，让我们暂时称其为foobarJSON。
2)单击事件时，捕获地图被单击位置的坐标。
3)然后将坐标附加到foobarJSON，并使用新版本foobarJSON更新leaflet
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
希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53732763
复制相关文章
相似问题