可以通过提交按钮将用户提交的标记添加到传单地图吗?

时间:2017-10-03 22:40:41

标签: javascript jquery leaflet

我遇到了一个问题,试图在我的地图上保存一个由用户放置的传单标记。目前,他们点击并添加他们点击的标记。再次单击它将放大,并打开一个弹出窗口,其中包含两个字段,用于在末尾输入提交按钮的信息。他们还可以拖动或单击以移动标记而不创建更多标记。

理想情况下,这将链接到数据库以存储来自用户的输入。这样做的人就是使用我不太了解的SQlite3和Ruby / Rails。现在,当我在搜索栏中使用GET填充数据后点击提交时,页面刷新并且标记消失。也可以让标记出现在地图上吗?我试过四处搜索,没有任何东西可以用这种方式添加标记

这是我到目前为止的代码,我不是一个专家。这可能解释了为什么我无法解决这个问题。

// 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;

}); 

如果需要更多信息,请告诉我,希望有人可以指出我正确的方向。谢谢。

1 个答案:

答案 0 :(得分:1)

页面刷新,因为您的表单触发了提交事件。触发提交时,页面将向同一页面发布GET请求,因为未定义目标。要禁用刷新,您必须将false值返回到表单的onsubmit属性。

绑定弹出窗口时,请使用方法添加return语句。

'<form role="form" id="form" onsubmit="return addMarker();">'+

其次定义addMarker方法。在此方法中,您可以向服务添加AJAX请求以发送数据和数据。将它以异步方式推送到您的数据库。

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
}