將Leaflet彈出窗口值插入窗體並提交

這裏是我的地圖代碼，它的工作原理完美無缺。我只是想知道如何獲得彈出窗口顯示的Lat Lng值，以便將其插入表單中。將Leaflet彈出窗口值插入窗體並提交

所以基本上它會是什麼樣子，

用戶點擊地圖
座標彈出（像現在一樣），並在相同的點擊座標填寫表格
用戶點擊提交！

這裏是代碼，

<script> 

var mymap = L.map('mapid').setView([38.47939, -99.49219], 5); 

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYnJldHQyMjI3OCIsImEiOiJjajAzNzZjZTkwOWNtMzJxbHZjMmVwZ2hyIn0.cWzkt6Gj_N3SZ8GKzqhByA', { 
    }).addTo(mymap); 

    var popup = L.popup(); 

    function onMapClick(e) { 

     popup 
      .setLatLng(e.latlng) 
      .setContent("Copy and Paste into the Form \n" + e.latlng.toString()) 
      .openOn(mymap); 

    } 

    mymap.on('click', onMapClick); 


</script>

我也包括我的情況下，形式它的事項 - 形式的作品原樣，您可以手動輸入數據和它被插入到MySQL我只需要幫助獲得自動插入計算出來...任何幫助非常感謝。

<div class="container"> 
    {% from "_formhelper.html" import render_field %} 
    <form method=post action="/add_spot/"> 
    <dl> 
     {{render_field(form.lat)}} 
     {{render_field(form.lng)}} 
    </dl> 
    <p><input type=submit value=Submit></p> 
    </form> 
    {% if error %} 
    <p class="error">{{error}}</p> 
    {% endif %} 
</div>

來源

2017-03-10 BrettJ

' e.latlng'是您需要的價值。它在地圖上的點擊點的位置。 –

在你onMapClicked功能只需使用：

document.getElementById('your-input-id').value = e.latlng.toString();

假設你有以下HTML表格：

<form> 
    <input type="text" name="lat-lng" id="lat-lng" /> 
    <input type="submit" value="GO" /> 
</form>

這將是你的函數：

function onMapClick(e) { 
    document.getElementById('lat-lng').value = e.latlng.toString(); 

    popup 
     .setLatLng(e.latlng) 
     .setContent("Copy and Paste into the Form \n" + e.latlng.toString()) 
     .openOn(mymap); 
}

來源

2017-03-10 09:59:58 Schlangguru

我認爲你是正確的，但是，我試圖填寫的表單由WTForms生成，而不僅僅是HTML表單。有沒有一種特殊的方式來實現相同的目標？ – BrettJ

非常感謝！我用你的例子結合這[鏈接]（http://stackoverflow.com/questions/35707246/flask-wtf-quick-form-running-some-javascript-and-setting-a-form-variable），它的工作原理!!!! – BrettJ

將Leaflet彈出窗口值插入窗體並提交

回答

相關問題