1

我正在使用地理编码控制插件 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>
4

1 回答 1

0

您可以利用 Leaflet 的地图事件，例如click或moveend，让用户选择位置。

有了这些，您可以使用坐标填写表单中的输入字段。此代码将在单击地图时使用坐标更新输入字段：

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

演示代码：https ://jsfiddle.net/chk1/dh58ury9/

于 2015-12-22T14:09:08.280 回答