Question

我正在开发一个包含openstreetmap，leaflet和leaflet plugin search-leaflet的项目。我有一个搜索表单，用户可以在其中自动填写地址和标记的位置。

然后在输入字段中对地址进行逗号分隔，我希望，如果用户点击该按钮，则应打开第二个表单，用户可以在其中验证地址。我想，将数据存储在数据库中也更好。

我的问题是，我没有获得自动填充表单的值，以便将值存储在输入文本字段中。

这是我的代码： HTML

<div class="col-md-8 col-md-offset-2 form-container">

<div id="map-adress"></div>

<div class="panel panel-default marker-panel">
    <div class="panel-heading">Create a post</div>
    <div class="panel-body">  
        <div class="col-md-8 col-md-offset-4">
            <p>Insert the adress of the marker position<br>
                (You can move the marker on the map to the right position).</p>
        </div>

        <div class="form-group">
            <label for="findbox-adress" class="col-md-4 control-label find-label">Marker Location</label>
            <div class="col-md-6">
                <div id="findbox-adress"></div>
            </div>

            <div class="col-md-2">
                <button type="submit" class="btn btn-primary user_marker_btn">
                    Validate
                </button>
            </div>
        </div>
    </div>
</div>

<div id="user_marker_adress" class="panel panel-default">
    <div class="panel-heading">Validate the marker adress</div>
    <div class="panel-body">

        <form class="form-horizontal" method="POST" action="{{ route('userposts.create') }}">
            {{ csrf_field() }}

            <div class="form-group">
                <label for="a_street" class="col-md-4 control-label">Street</label>
                <div class="col-md-6">
                    <input id="a_street" type="text" class="form-control" name="a_street" required>
                </div>
            </div>

            <div class="form-group">
                <label for="a_street_no" class="col-md-4 control-label">Street No.</label>
                <div class="col-md-6">
                    <input id="a_street_no" type="text" class="form-control" name="a_street_no" required>
                </div>
            </div>

            <div class="form-group">
                <label for="a_zip_code" class="col-md-4 control-label">Zip Code</label>
                <div class="col-md-6">
                    <input id="a_zip_code" type="text" class="form-control" name="a_zip_code" required>
                </div>
            </div>

            <div class="form-group">
                <label for="a_state" class="col-md-4 control-label">State</label>
                <div class="col-md-6">
                    <input id="a_state" type="text" class="form-control" name="a_state" required>
                </div>
            </div>

            <div class="form-group">
                <label for="a_country" class="col-md-4 control-label">Country</label>
                <div class="col-md-6">
                    <input id="a_country" type="text" class="form-control" name="a_country" required>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-8 col-md-offset-4">
                    <button type="reset" class="btn btn-danger">
                        Clear
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Next
                    </button>
                </div>
            </div>

        </form>

    </div>
</div>

使用Javascript / jQuery的

$(document).ready(function(){

var map = new L.Map('map-adress', {zoom: 2, center: new L.latLng([24.61, -34.63]) });
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}));


/*var markersLayer = new L.LayerGroup();  //layer contain searched elements
map.addLayer(markersLayer);
*/

map.addControl( new L.Control.Search({
    container: 'findbox-adress',
    url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
    jsonpParam: 'json_callback',
    propertyName: 'display_name',
    propertyLoc: ['lat','lon'],
    marker: L.marker([0,0], {draggable:'true'}).addTo(map).on('click', getLatLon),
    autoCollapse: false,
    collapsed: false,
    autoType: false,
    minLength: 2,
    autoResize: false,
    zoom: 18
}) );

$( ".search-input" ).attr( "Placeholder", "No., Street, zip code, State and country" );

function getLatLon(e) {
    alert(this.getLatLng());
}

$(".user_marker_btn").click(function(){
    $("#user_marker_adress").css( "display", "block" );
});


$(".user_marker_btn").click(function(){
    $(".search-input").change(function(){
        $(div).text($(this).val());
    });
});

});

如果我点击＆＃34; user_marker_btn＆＃34; ＆＃34;搜索输入＆＃34;的值应该改变，我可以访问该值。并将其存储在第二种形式中，然后将其存储到数据库中。

但我不知道怎么做？希望有人可以帮助我。

通过提供数据更新输入值

0 个答案: