Javascript 在js-Symfony 3.4-js中设置细枝变量

大家好，我正在创建一个工作非常好的表单，但是当我想设置位置的本地化，但现在我必须手动设置它（使用纬度和逻辑度），所以我创建了一个带有可拖动标记的地图，当我拖动标记时，值lat和lng会发生变化（在控制台中），但现在我想在表单中设置它（因为值正在更改，但未保存）并且我希望在更改标记位置时更改纬度和经度的值（因此我希望使用值lat设置纬度，使用值lng设置经度）

我的表单html（在带有symfony的小树枝中）：

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






创造一个地方


{{form_start（form）}}
内容：
{{form_小部件（form.content）}
标题：
{{form_小部件（form.title）}
主题：
{{form_小部件（form.theme）}
最大用户数：
{{form_小部件（form.maxUser）}
时间长度：
{{form_小部件（form.timeLength）}
经度：
{{form_小部件（form.longitude）}
纬度：
{{form_小部件（form.latitude）}


{%block javascripts\u map%}
{%endblock%}


提交
{{form_end（form）}}
{%endblock%}

还有我的表格：

{% 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 %}

{%extends'admin/user/new_place.html.twig%}
{%block javascripts\u map%}
/* -------------------------------------------------------------------
-----------
*
*#基本标记
*
*为maps\u google\u markers.html页面添加的特定JS代码
*
* ---------------------------------------------------------------------------- */
//设置模块
// ------------------------------
var GoogleMapMarkerBasic=函数（）{
//
//设置模块组件
//
//折线图
var_googleMapMarkerBasic=函数（）{
如果（谷歌的类型=='undefined'）{
console.warn（'警告-谷歌地图库不可用
载入");；
返回；
}
//设置图
函数初始化（）{
//定义地图元素
变量映射\标记\简单\元素=
getElementById（'map_marker_simple'）；
//设定坐标
var myLatlng=new google.maps.LatLng（{{place.latitude
}}），（{{place.longitude}}'）；
//选择权
变量映射选项={
缩放：10，
中心：myLatlng
};
//应用选项
var map=new google.maps.map（map\u marker\u simple\u元素，mapOptions）；
var contentString='Marker'；
//添加信息窗口
var infowindow=new google.maps.infowindow({
内容：contentString
});
//添加标记
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
真的，
标题：（{place.title}}'），
动画：google.maps.animation.DROP
});
marker.addListener（'drag'，function（））{
信息窗口。打开（地图、标记）；
var lat=marker.getPosition（）.lat（）；
var lng=marker.getPosition（）.lng（）；
控制台日志（lat、lng）
});
//附加单击事件
};
//在窗口加载时初始化映射
google.maps.event.addDomListener（窗口“加载”，初始化）；
};
返回{
init:function（）{
_googleMapMarkerBasic（）；
}
}
}();
//初始化模块
// ------------------------------
document.addEventListener（'DOMContentLoaded'，function（）{
GoogleMapMarkerBasic.init（）；
});
{%endblock%}

这是表单的视图：

{% 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 %}

---

对于所有试图回答的问题：）

您所要做的就是通过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());

---

您所要做的就是通过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());

---

我个人使用Vue.js在symfony和javascript之间进行双向绑定，如果您对不仅仅使用vanilla javascript感兴趣，我可以给出一个答案我不知道Vue的任何内容，但我会尝试：）我个人使用Vue.js在symfony和javascript之间进行双向绑定，如果您对不仅仅使用vanilla JavaScription感兴趣，我可以给出一个答案。我不知道vue的任何功能，但我会尝试：）