Javascript 是否可以通过“提交”按钮将用户提交的标记添加到传单地图?
我在试图在用户放置的地图上保存传单标记时遇到问题。当前,他们单击并在单击的位置添加标记。再次单击后,它将放大,并打开一个弹出窗口,其中有两个字段可输入信息,最后有一个提交按钮。它们还可以拖动或单击以移动标记,而无需创建更多标记 理想情况下,这将链接到数据库以存储用户的输入。将要做这件事的人正在使用SQlite3和Ruby/Rails,我对此知之甚少。现在,当我在搜索栏中用GET填充数据后单击submit时,页面刷新,标记消失。有可能让标记也出现在地图上吗?我已经尝试过四处搜索,但没有显示以这种方式添加标记的内容 这是到目前为止我掌握的代码,我无论如何都不是专家。这可能解释了为什么我不能弄明白这一点Javascript 是否可以通过“提交”按钮将用户提交的标记添加到传单地图?,javascript,jquery,leaflet,Javascript,Jquery,Leaflet,我在试图在用户放置的地图上保存传单标记时遇到问题。当前,他们单击并在单击的位置添加标记。再次单击后,它将放大,并打开一个弹出窗口,其中有两个字段可输入信息,最后有一个提交按钮。它们还可以拖动或单击以移动标记,而无需创建更多标记 理想情况下,这将链接到数据库以存储用户的输入。将要做这件事的人正在使用SQlite3和Ruby/Rails,我对此知之甚少。现在,当我在搜索栏中用GET填充数据后单击submit时,页面刷新,标记消失。有可能让标记也出现在地图上吗?我已经尝试过四处搜索,但没有显示以这种方
// User Marker
var currentMarker;
map.on("click", function (event) {
if (currentMarker) {
currentMarker._icon.style.transition = "transform 0.3s ease-out";
currentMarker._shadow.style.transition = "transform 0.3s ease-out";
currentMarker.setLatLng(event.latlng);
setTimeout(function () {
currentMarker._icon.style.transition = null;
currentMarker._shadow.style.transition = null;
}, 300);
return;
}
currentMarker = L.marker(event.latlng, {
draggable: true,
icon: L.AwesomeMarkers.icon({
icon: 'exclamation-circle',
markerColor: 'orange',
iconColor: '#F8FAEE',
})
}).addTo(map).on("click", function (e) {
map.setView(e.latlng, 17);
alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
event.originalEvent.stopPropagation();
}).bindPopup('<form role="form" id="form" onsubmit="addMarker()">'+
'<div class="form-group">'+
'<label class="control-label col-sm-10"><strong>Type of Complaint </strong></label>'+ "<br>" +
'<select class="form-control" id="toc" name="toc">'+
'<option value="Pothole">Pothole</option>'+
'<option value="Construction">Construction</option>'+
'<option value="Road Closed">Road Closed</option>'+
'<option value="Other">Other...</option>'+
'</select>'+
'</div>'+
'<div class="form-group2">'+
'<label class="control-label col-sm-10"><strong>Description of Complaint </strong></label>'+ "<br>" +
'<input type="text" placeholder="Extra Information" id="doc" name="extra" class="form-control"/>'+
'</div>'+
'<div class="form-group">'+
'<div style="text-align:center;" class="col-xs-11"><button style="text-align:center;" id="submit" value="submit" class="btn btn-primary trigger-submit">Submit</button></div>'+
'</div>'+ "<br>" +
'</form>');
});
document.getElementById("done").addEventListener("click", function () {
currentMarker = null;
});
//用户标记
var电流标记;
映射上(“单击”),功能(事件){
如果(当前标记){
currentMarker._icon.style.transition=“变换0.3s缓解”;
currentMarker.\u shadow.style.transition=“变换0.3s缓解”;
currentMarker.setLatLng(事件latlng);
setTimeout(函数(){
currentMarker.\u icon.style.transition=null;
currentMarker.\u shadow.style.transition=null;
}, 300);
返回;
}
currentMarker=L.marker(event.latlng{
真的,
图标:L.AwesomeMarkers.icon({
图标:“感叹号圆圈”,
马克颜色:“橙色”,
iconColor:“#F8FAEE”,
})
}).addTo(映射)。在(“单击”)上,函数(e){
setView地图(e.latlng,17);
警报(“Lat,Lon:+e.latlng.Lat+”,“+e.latlng.lng”)
event.originalEvent.stopPropagation();
}).bindPopup(“”)+
''+
“投诉类型”“+”
“+
''+
“坑洞”+
“建设”+
‘封路’+
“其他…”+
''+
''+
''+
“投诉描述”“+”
“+
''+
''+
''+
“提交”+
“+”
”+
'');
});
document.getElementById(“完成”).addEventListener(“单击”,函数)(){
currentMarker=null;
});
如果需要更多信息,请告诉我,希望有人能为我指出正确的方向。谢谢。页面已刷新,因为您的表单触发了提交事件。触发提交后,页面将向未定义目标的同一页面发布GET请求。要禁用刷新,必须向表单的onsubmit属性返回一个假值 绑定弹出窗口时,使用该方法添加一个return语句
'<form role="form" id="form" onsubmit="return addMarker();">'+
如果我按照你的指示去做的话,很抱歉回复晚了。他们填写的标记将出现在地图上,直到数据从数据库中删除?我在尝试使标记连续出现时遇到问题。我能够让我创建的持续标记工作。尽管尝试在刷新或返回站点时显示用户标记是我遇到问题的地方。感谢您的洞察力。要在页面刷新后保留以前创建的标记,您必须通过一些服务从数据库中提取它们并重新创建它们。
var addMarker = function(){
//Get the data from the form & send it to the service.
$.ajax({
method: "POST",
url: "someservice.php",
data: { toc: "your type", description: " your description" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
return false; //Don't submit anything
}