Question

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

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

Answer 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'];
});

尝试此希望对您有所帮助！

Answer 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'];

在传单弹出窗口中向表格添加坐标

2 个答案: