Я пишу проект MVC, который включает в себя возможность добавлять точки на карту Google.До сих пор я мог добавлять точки в БД путем жесткого кодирования значений широты и долготы, но я хочу позволить пользователю выбрать положение на карте и отправить их обратно в контроллер из представления Razor.Я уже написал часть вида, и я могу открыть модальное всплывающее окно с картой и жестко запрограммированным местоположением.Я хочу сделать следующее: 1. позволить пользователю вставить адрес в текстовое поле 2. открыть модальное всплывающее окно и центрировать карту с маркером рядом с адресом 3. сохранить положение в двух полях представления, чтобыотправьте их обратно в контроллер.
Я использовал код, предоставленный разработчиками Google по адресу: https://developers.google.com/maps/documentation/javascript/examples/place-details, и пришел к следующему коду:
Весь код находится вRazor View:
<form>
<fieldset>
<legend>Ubicazione: </legend>
<div class="form-group">
@Html.LabelFor(model => model.Indirizzo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<button type="button" class="btn btn-default" style="float:left"
data-toggle="modal" data-target="#findInModal" data-backdrop="static"
data-keyboard="true" data-address='pippo'>
Trova posizione
</button>
@Html.EditorFor(model => model.Indirizzo, new { htmlAttributes = new { @class = "form-control" }, @id="addr" })
@Html.ValidationMessageFor(model => model.Indirizzo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Latitudine, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@*@Html.EditorFor(model => model.Latitudine, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.DisplayFor(model => model.Latitudine, new { htmlAttributes = new { @class = "form-control" } })
@Html.HiddenFor(model => model.Latitudine)
@Html.ValidationMessageFor(model => model.Latitudine, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Longitudine, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@*@Html.EditorFor(model => model.Longitudine, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.DisplayFor(model => model.Longitudine, new { htmlAttributes = new { @class = "form-control" } })
@Html.HiddenFor(model => model.Longitudine)
@Html.ValidationMessageFor(model => model.Longitudine, "", new { @class = "text-danger" })
</div>
</div>
</fieldset>
</form>
Мне бы хотелось, чтобы значение data-address = 'pippo' было адресом в "@ Html.EditorFor (model => model.Indirizzo…. "
Вот модальное всплывающее содержимое, которое открывает карту и центрирует ее в жестко закодированную позицию:
<!-- Find Location In Modal -->
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="modal fade" id="findInModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="height: 0px;"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Chiudi">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="gMap" style="height:400px;width:100%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&language=it®ion=IT&libraries=places&callback=gMap" async defer></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
let myCenter;
let mapProp;
let map;
let service;
function gMap() {
myCenter = new google.maps.LatLng(41.893140, 12.483330);
mapProp = { center: myCenter, zoom: 15, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.HYBRID };
map = new google.maps.Map(document.getElementById("gMap"), mapProp);
let request = {
query: 'Musei Capitolini',
fields: ['name', 'geometry'],
};
service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (let i = 0; i < results.length; i++) {
createMarker(results[i]);
}
map.setCenter(results[0].geometry.location);
}
});
}
function createMarker(place) {
let marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: "/Content/icons/01.png"
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(place.name + place.geometry.location);
infowindow.open(map, this);
});
}
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva</button>
</div>
</div>
</div>
</div>
}
, а вот скрипт, который открываетвсплывающее окно:
<script>
$('#findInModal').on('show.bs.modal', function (event) {
let button = $(event.relatedTarget) // Button that triggered the modal
let AddressToFind = button.data('address') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
let modal = $(this)
modal.find('.modal-title').text('Find near: ' + AddressToFind)
})
</script>
В настоящее время я не реализовал способ возврата значений place.geometry.location в родительское представление, но предполагается, что они обновят модель => модель. продольная и модель => модель. продольная значений, которые будут возвращены в контроллер для обновления базы данных.
Заранее благодарен за любую помощь.