Question

我正在尝试创建一个带有地图的表单。拖动标记，填写一些字段并提交。除了得到纬度和经度记录/回声之外，我还有它的工作。

将数据发送到.csv文件，然后发送电子邮件。我无法将lat / lng字段作为输入＆gt; PHP。

您可以在此处看到jsfiddle。

请注意我使用Mapbox作为地图，并希望保留它。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Display latitude longitude on marker movement</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:935px; height: 700px; z-index: -9;}

pre.ui-coordinates {
    position:absolute;
    bottom:10px;
    left:10px;
    padding:5px 10px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    font-size:11px;
    line-height:18px;
    border-radius:3px;
}

.formarea{
    position:absolute;
    background: #08080a;
    top:0px;
    left:680px;
    padding: 10px;
    height: 680px;
    width: 240px;
    border: 0px solid black;
    opacity: .8;
    color: white;
}
.inputfield{
    width: 100%;
}
.textlarge{
    resize: both;
    vertical-align: top;
}

#latui, #lngui{
    color: red;
    }
</style>

</head>
<body>


<div class="formarea">   
    <form id="myform" name="form1" method="post" autocomplete="on" action="pdata.php">  
        <label><b>Marker Type</b></label>
        <select name="markertype" class="inputfield" id="markertype">
              <option selected="selected" disabled='disabled'>-</option>
              <option value="sidewalk issues">sidewalk issues</option>
              <option value="litter">litter</option>
              <option value="graffiti">graffiti</option>

        </select>
        <label><b>Notes</b></label>
        <input class="inputfield textlarge"  name="notes" id="notes" type="text" pattern="[^,]*" title="You may be using an invalid text symbol"/>
        <hr>
        <label><b>Coordinates</b></label>
        <p id="latui"></p>
        <p id="lngui"></p>
<input class="button buttonmin success small" type="submit" name="Submit" value="&#10003; Submit Form">
    </form>
</div>  


<div id='map'></div>
<pre id='coordinates' class='ui-coordinates'></pre>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZWpzMDYwMDMiLCJhIjoicTJ6M29PTSJ9.EM3fFLHt6IQR17e7aSw7Sg';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
    .setView([41.756971085614175, -72.6800537109375], 12);

//var coordinates = document.getElementById('coordinates');
var latui = document.getElementById('latui');
var lngui = document.getElementById('lngui');

var marker = L.marker([41.756971085614175, -72.6800537109375], {
    icon: L.mapbox.marker.icon({
      'marker-size': 'large',
      'marker-color': '#f86767',
      'marker-symbol': 'star'
    }),
    draggable: true
}).addTo(map);

// every time the marker is dragged, update the coordinates container
marker.on('dragend', ondragend);

// Set the initial marker coordinate on load.
ondragend();

function ondragend() {
    var m = marker.getLatLng();
    //coordinates.innerHTML = 'Latitude: ' + m.lat + '<br />Longitude: ' + m.lng;
    latui.innerHTML = m.lat;
    lngui.innerHTML = m.lng;
}
</script>


</body>
</html>

感谢您的帮助，

埃里克

Answer 1

只需将<p>改为<input>，如this。

计算字段为表单/ php输入

1 个答案: