大家好,我正在创建一种效果很好的表单,但是当我想设置位置的本地化但现在我必须手动设置它时(使用纬度和对数),因此我创建了带有可拖动标记的地图以及何时我将标记lat和lng的值拖动到控制台中(但在控制台中),但现在我想将其设置为表格(因为值在更改但未保存),并且我想更改纬度和经度的值标记的位置(因此我想将纬度设置为lat,将经度设置为lng)
我的表单html(带有symfony的树枝中):
{% 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 %}
这是表格的视图:
感谢所有尝试回答的人:)
答案 0 :(得分:2)
您要做的就是通过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());