大家好,我正在创建一个效果很好的表单,但是当我想设置该地点的本地化时,但现在我必须手动设置它(带有纬度和经度),所以我创建了一个带有可拖动标记的 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 :
感谢所有尝试回答的人:)
最佳答案
您所要做的就是通过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 - 在 js 中设置 twig 变量 - Symfony 3.4 - JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51648241/