javascript - 在 js 中设置 twig 变量 - Symfony 3.4 - JS

Question

大家好，我正在创建一个效果很好的表单，但是当我想设置该地点的本地化时，但现在我必须手动设置它(带有纬度和经度)，所以我创建了一个带有可拖动标记的 map ，当我拖动标记值 lat 和 lng 更改(在控制台中)，但现在我想在表单中设置它(因为值正在更改但未保存)，并且我想在更改时更改纬度和经度的值标记的位置(所以我想用 lat 值设置纬度，用 lng 值设置经度)

我的表单 html(在 symfony 的 twig 中):

{% extends 'base.html.twig' %}

{% block body %}
<!-- Left and right buttons -->
<div class="col-8 mx-auto">
    <br/><br/><br/><br/>
    <div class="card">
        <div class="card-header header-elements-inline">
            <h6 class="card-title">Create a place</h6>
        </div>
        <br/>
        <div class="card-body">
            {{ form_start(form) }}
            <div class="form-group">
                <label for="form_username">Content :</label>
                {{ form_widget(form.content) }}
            </div>
            <div class="form-group">
                <label for="form_username">Title:</label>
                {{ form_widget(form.title) }}
            </div>
            <div class="form-group">
                <label for="form_username">Theme:</label>
                {{ form_widget(form.theme) }}
            </div>
            <div class="form-group">
                <label for="form_username">Max users:</label>
                {{ form_widget(form.maxUser) }}
            </div>
            <div class="form-group">
                <label for="form_username">timeLenght:</label>
                {{ form_widget(form.timeLength) }}
            </div>
            <div class="form-group">
                <label for="form_username">Longitude:</label>
                {{ form_widget(form.longitude) }}
            </div>
            <div class="form-group">
                <label for="form_username">Latitude:</label>
                {{ form_widget(form.latitude) }}
            </div>

            <div class="card px-3">
                <br/>
                <!-- Basic map -->
                <div class="map-container" id="map_marker_simple"></div>
                    {% block javascripts_map %}
                    {% endblock %}
                <br/>
                <!-- /basic map -->
            </div>
            <!-- /custom handle -->
        </div>


            <div class="d-flex justify-content-end align-items-center">
                    <button type="submit" class="btn bg-blue" id="create">Submit<i class="icon-paperplane ml-2"></i></button>
                </div>
            {{ form_end(form) }}
        </div>
    </div>
</div>
<!-- /left and right buttons -->
{% endblock %}

我的部分js的形式:

{% extends 'admin/user/new_place.html.twig' %}
{% block javascripts_map %}
<script type="text/javascript">
/* -------------------------------------------------------------------
-----------
*
*  # Basic markers
*
*  Specific JS code additions for maps_google_markers.html page
*
* ---------------------------------------------------------------------------- */


// Setup module
// ------------------------------

var GoogleMapMarkerBasic = function() {


//
// Setup module components
//

// Line chart
    var _googleMapMarkerBasic = function() {
        if (typeof google == 'undefined') {
            console.warn('Warning - Google Maps library is not 
loaded.');
            return;
        }

// Setup map
        function initialize() {

// Define map element
            var map_marker_simple_element = 
document.getElementById('map_marker_simple');

// Set coordinates
            var myLatlng = new google.maps.LatLng(('{{ place.latitude 
}}'), ('{{ place.longitude }}'));

// Options
            var mapOptions = {
                zoom: 10,
                center: myLatlng
            };

// Apply options
            var map = new google.maps.Map(map_marker_simple_element, mapOptions);
            var contentString = 'Marker';

// Add info window
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

// Add marker
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                draggable: true,
                title: ('{{ place.title }}'),
                animation: google.maps.Animation.DROP
            });

            marker.addListener('drag', function() {
                infowindow.open(map,marker);
                var lat = marker.getPosition().lat();
                var lng = marker.getPosition().lng();
                console.log(lat, lng)

            });
// Attach click event
        };

// Initialize map on window load
        google.maps.event.addDomListener(window, 'load', initialize);
    };


    return {
        init: function() {
            _googleMapMarkerBasic();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    GoogleMapMarkerBasic.init();
});
</script>
{% endblock %}

这是表单的 View :

感谢所有尝试回答的人:)

Answer 1

您所要做的就是通过javascript更改纬度和经度输入值。

普通 JavaScript:

document.getElementById("your_latitude_field").value = marker.getPosition().lat();
document.getElementById("your_longitude_field").value = marker.getPosition().lng();

JQuery:

$("#your_latitude_field").val(marker.getPosition().lat());
$("#your_longitude_field").val(marker.getPosition().lng());