如何將小冊子插件添加到腳本外部的表單中

Question

我正在使用地理編碼控制插件L.GeoSearch（https://github.com/smeijer/L.GeoSearch），並且在我的小冊子地圖的左側邊欄上有一個表單。表單應該將輸入提交給一個php文件，然後通過XMLHttpRequest進行處理。

座標也必須轉移，我對如何將geosearch位整合到表單中有點困惑。有人可以幫我解決或提供一些提示嗎？

頁：http://app.seedbomb.city/cartodb.html

這是我的地圖代碼： https://jsfiddle.net/Gopher69/oza08ja4/embedded/result/

<!-- Begin Sidebar!--> 
<div id="sidebar"> 
    <h2>Markiere deinen Standort</h2> 
    <div class="ss-form-container"> 
     <div class="ss-header-image-container"> 
      <div class="ss-header-image-image"> 
       <div class="ss-header-image-sizer"></div> 
      </div> 
     </div> 
     <div class="ss-top-of-page"></div> 
     <div class="ss-form"> 
      <form onsubmit="" target="_self" id="ss-form" method="POST" action="write_cartodb.php"> 
       <ol style="padding-left: 0" class="ss-question-list" role="list"> 
        <div role="listitem" class="ss-form-question errorbox-good"> 
         <div class="ss-item ss-text" dir="auto"> 
          <div class="ss-form-entry"> 
           <label for="entry_2039516724" class="ss-q-item-label"> 
            <div class="ss-q-title">Bildbeschreibung 
            </div> 
            <div dir="auto" class="ss-q-help ss-secondary-text"></div> 
           </label> 
           <input type="text" title="" aria-label="caption " dir="auto" id="entry_2039516724" class="ss-q-short" value="" name="beschreibung"> 
          </div> 
         </div> 
        </div> 
        <div role="listitem" class="ss-form-question errorbox-good"> 
         </br> 
         <input type="file" name="bild" id="uploadfiles" accept="image/*" /> 
        </div> 
     </div> 
    </div> 
    </br> 

    </br> 
    <div class="ss-item ss-navigate"> 
     <table id="navigation-table"> 
      <tbody> 
       <tr> 
        <td dir="ltr" id="navigation-buttons" class="ss-form-entry goog-inline-block"> 
         <input type="submit" class="jfk-button jfk-button-action " id="ss-submit" value="Senden" name="submit"> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<!-- End Sidebar!--> 

的PHP處理文件：

https://jsfiddle.net/Gopher69/c692kqov/embedded/result/

<?php 

echo "<h1>" . $_POST["beschreibung"] . "</h1>"; 
echo "<h1>" . $_POST["bild"] . "</h1>"; 

?> 

<script> 
    function dialResponse() { 
     console.log(this.responseText); //should be return value of 1 
    } 

    var oReq = new XMLHttpRequest(); 
    oReq.onload = dialResponse; 
    oReq.open("get", "https://{account}.cartodb.com/api/v2/sql?q=INSERT INTO cartodb_test (caption, image_low, image_standard, image_thumb, latitude, longitude) VALUES (<?php echo $beschreibung;?>, http://app.seedbomb.city/images/<?php echo $bild;?>, http://app.seedbomb.city/images/<?php echo $bild;?>, http://app.seedbomb.city/images/<?php echo $bild;?>, 12.532534, 12.643245)&api_key=http://app.seedbomb.city/images/<?php echo $bild;?>" 
      ", true); 
      oReq.send(); 
</script> 

Answer 1

您可以利用傳單的map events，如click或moveend，讓用戶選擇該位置。

用那些你可以用你的座標填寫表單中的輸入字段。

map.on('click', function(e){ 
    document.getElementById('userlocation').value = e.latlng.lat+','+e.latlng.lng; 
}); 

演示代碼在這裏：https://jsfiddle.net/chk1/dh58ury9/

在地圖上點擊時，該代碼將更新爲輸入域座標