Question

我正在使用mapbox，我在地图上点击插入标记，但是我也想在表单中附加这些值，以便我可以使用我的控制器来存储这些值。

正在添加标记并附加值，

在最后一个值中说LngLat（-1）等，在逗号之后附加“哪个应该在关闭括号之后”，如何删除它？

       <div id="right" class="map">
            <div id='map' class="map" style='width: 100%; height: 100%; margin: 0px;'></div>
            <script>
            mapboxgl.accessToken = 'pk.eyJ1IjoibGl2ZS1vbGRoYW0iLCJhIjoiY2ozbXk5ZDJ4MDAwYjMybzFsdnZwNXlmbyJ9.VGDuuC92nvPbJo-qvhryQg';
            var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
                        center: [-1.77, 52.73],
                        zoom: 3
            });
                        map.addControl(new MapboxGeocoder({
                        accessToken: mapboxgl.accessToken
                    }));
                        map.on('click', function (e) {
                        var lng = e.lngLat.lng;
                        var lat = e.lngLat.lat;
                        var lngLat = e.lngLat;
                        $( ".append").append( "<input type=hidden name=lng value="+lng+">");
                        $( ".append").append( "<input type=hidden name=lat value="+lat+">");
                        $( ".append").append( "<input type=hidden name=lngLat value="+lngLat+">");
                        new mapboxgl.Marker()
                        .setLngLat(e.lngLat)
                        .addTo(map);
});
            </script>
                            <form class="append" role="form" method="POST" action="{{ action('BusinessController@saveMarkers') }}">
                                <button type="submit" class="btn btn-success">
                  Save Marker
                </button>
                            </form>

Answer 1

问题出在这一行

$( ".append").append( "<input type=hidden name=lngLat value="+lngLat+">");

jQuery正试图将append内的字符串解析成有效的html。有效的html意味着属性需要包含在"引号中。因此，jQuery尝试将type=hidden转换为type="hidden"，依此类推。这适用于简单的情况，但对于发生问题的行不适用。

要解决这个问题，我认为最好通过构建更好的html来简化jQuery的工作，这样更容易解析：

'<input type="hidden" name="lngLat" value="LngLat {lng: ' + lngLat.lng + ', lat: ' + lngLat.lat + '}">'

mapbox附加值以在地图上单击形成

1 个答案: