在传单弹出窗口中添加坐标到表单答案

【问题标题】：Add coordinates to form in leaflet popup在传单弹出窗口中添加坐标到表单
【发布时间】：2018-12-22 08:02:07
【问题描述】：

我们正在尝试将 latlng 坐标添加到传单弹出窗口内的表单输入中。我们已经尝试过内联脚本，但似乎无法正常工作。

function onMapClick(e) {

let userMarkers = [];
var marker = L.marker(e.latlng, {
  icon: theIcon,
  draggable: true
}).addTo(map).bindPopup("<form method='POST' action='/spotForm'> <div 
class='form-group'><label for='spotName'>Name</label><input 
type='text'class='form-control' id='spotName' placeholder='Name this 
spot!' name='spotName'></div><button type='submit' class='btn btn-
primary'>Add Spot Data</button></form>");
userMarkers.push(e.latlng);
console.log(userMarkers, "hi");



  }
  map.on('click', onMapClick);
  L.control.layers(baseLayers, overlays).addTo(map);

【问题讨论】：

你的意思是你让用户在你的地图上放置一个标记并拖动它来改变它的位置。并且它有一个弹出窗口，当标记被移动时，表单输入值应该被更新。

标签： database mongoose leaflet maps schema

【解决方案1】：

以弹出窗口<form id="popup-form" method='POST' action='/spotForm'> </form>中的形式添加id

现在在地图上添加popupopen事件

 map.on('popupopen',function(e){
    var latLng = e["popup"]._latlng;
    var form = document.querySelector('#popup-form')
    form['spotName'].value = latLng['lat'] + ', ' +latLng['lng'];
});

试试这个希望对你有帮助！

【讨论】：

T H A N K Y O U ！！ !

【解决方案2】：

这很好用！但现在我们需要进入一个数字。下面是我们从传单地图返回坐标的模式。

 //Schema
 name: {
 type: String,
 required: true,
 trim: true
 },
 properties:{

 },
 coordinates: [Number]
,
email: {
type: String,
unique: true,
required: true,
trim: true
},

这是在点击我们的表单时返回坐标的代码。但它不是作为数字返回，而是作为字符串返回。我们如何使输入成为我们表单中的数字？我们尝试了几件事，但都没有奏效。

map.on('click', onMapClick);
  L.control.layers(baseLayers, overlays).addTo(map);
  map.on('popupopen', function (e) {
    var latLng = e["popup"]._latlng;
    var form = document.querySelector('#popupForm');
    form['coordinates'].value = latLng['lat'] + ', ' + latLng['lng'];

【讨论】：