javascript - Mapbox 将值附加到 map 单击的表单中

Question

我正在使用mapbox，并且在 map 单击上插入一个标记，但是我也想将这些值附加到表单中，以便我可以使用我的 Controller 来存储这些值。

正在添加标记并附加值，

在最后一个值中，其中表示 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" 等等这对于简单的情况来说效果很好，但是对于出现问题的行来说效果不佳。

为了解决这个问题，我认为最好让 jQuery 的工作更容易，通过构建更好的 html，更容易解析:

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