Как добавить плагин листовки в форму вне скрипта

Я использую плагин управления геокодированием L.GeoSearch (https://github.com/smeijer/L.GeoSearch) и у меня есть форма на левой боковой панели моей карты листовки. Форма должна отправить входные данные в php-файл, который затем выполняет обработку через XMLHttpRequest.

Координаты также должны быть перенесены, и я немного застрял в том, как интегрировать бит геоархии в форму. Кто-нибудь может мне помочь или дать какие-нибудь советы?

Страница: 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>

0

Решение

Вы можете использовать Leaflet’s карта событий, такие как click или же moveend, чтобы позволить пользователю выбрать позицию.

С их помощью вы можете заполнить поле ввода в вашей форме с координатами. Этот код обновит поле ввода с координатой при нажатии на карту:

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

Демо-код здесь: https://jsfiddle.net/chk1/dh58ury9/

0

Другие решения

Других решений пока нет …