【发布时间】：2019-02-07 16:17:26
【问题描述】：
我正在编写一个 MVC 项目，其中包括在 Google 地图中添加点的可能性。到目前为止，我可以通过硬编码纬度和经度值向 db 添加点，但我想让用户选择地图上的位置并将它们从 Razor 视图发送回控制器。 我已经编写了部分视图，并且可以打开带有地图和硬编码位置的模式弹出窗口。 我想做的是： 1.让用户在文本框中插入地址 2.打开模式弹出窗口，并在地址附近用标记将地图居中 3. 保存视图的两个字段中的位置，以便将它们发送回控制器。
我一直在使用 Google Developers 提供的代码： https://developers.google.com/maps/documentation/javascript/examples/place-details 并得出以下代码：
所有代码都在 Razor 视图中：
<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 值返回到父视图，但他们应该更新 model => model.Latitudine 和 model => model.Longitudine 值将返回给控制器以更新数据库。
提前感谢您的帮助。
【问题讨论】：
标签： javascript asp.net razor bootstrap-modal