[英]How to zoom in when a value from a drop-down is selected?
As the title says i want to zoom on the location selected in the drop-down list. 正如标题所示,我想放大下拉列表中选择的位置。 I have different markers on the map, locations which are in the drop-down too, so when i chose one from the drop-down i want to zoom in and center on the location.
我在地图上有不同的标记,也在下拉列表中的位置,所以当我从下拉列表中选择一个时,我想放大并以中心位置为中心。 I'm pretty new at this javascript, jquery thing and any help would be highly appreciated.
我对这个javascript,jquery的事情很新,任何帮助都会受到高度赞赏。 Here is my drop-down list:
这是我的下拉列表:
<div>
<select class="form-control" id="selectedValue" >
<option>--Select--</option>
@foreach (var item in ViewBag.ListOfDropdown)
{
<option value="@item.Id">@item.Name</option>
}
</select>
</div>
Here is how my Google Maps is rendered and populated: 以下是我的Google地图的呈现和填充方式:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: 46.770920, lng: 23.589920 },
zoom: 13
});
$.get("/Home/GetAllLocation",
function (data, status) {
var marker = [];
var contentString = [];
var infowindow = [];
for (var i = 0; i < data.length; i++) {
marker[i] = new google.maps.Marker({
position: { lat: data[i].latitudine, lng: data[i].longitudine },
map: map
});
contentString[i] = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">' +
data[i].name +
'</h1>' +
'<div id="bodyContent">' +
'<p><b> Numar locuri Fast Charging: </b>' +
data[i].nrOfBikes +
'<p><b> Numar locuri care nu-s Fast Charging: </b>' +
data[i].nrOfAvailableBikes +
'<a href="@Url.Action("Index", "Home")" ><p>View Details</a>' +
'<form asp-action=""><div><input type="submit" value="Open" class="btn btn-success"> <input type="submit" value="Close" class="btn btn-danger"></div></form>';
infowindow[i] = new google.maps.InfoWindow({
content: contentString[i]
});
var mdl = marker[i];
google.maps.event.addListener(marker[i],
'click',
(function (mdl, i) {
return function () {
infowindow[i].open(map, marker[i]);
for (var j = 0; j < infowindow.length; j++) {
if (j != i) {
infowindow[j].close();
}
}
}
})(marker[i], i));
}
});
}
And here is what i have found on the internet and tried to apply to what i need, but i'm not sure i did it in the right way: 这是我在互联网上找到的并试图应用于我需要的东西,但我不确定我是以正确的方式做到的:
jQuery(document).on('change', '#selectedValue', function() {
var latlngzoom = jQuery(this).val();
var newzoom = 1 * latlngzoom[2];
newlat = 1 * latlngzoom[0];
newlng = 1 * latlngzoom[1];
map.setZoom(newzoom);
map.setCenter({lat:newlat, lng: newlng})
});
I managed to resolve my question and here is my code, in case anyone else will ever need something like that: The cshtml drop-down: 我设法解决了我的问题,这是我的代码,以防其他人需要这样的东西:cshtml下拉列表:
<select class="form-control" id="selectedValue" onchange="GoToLocation(this.value)">
<option>Choose a station...</option>
@foreach (var item in ViewBag.ListOfDropdown)
{
<option value="@item.Id">@item.Name</option>
}
</select>
The Controller: 控制者:
public JsonResult GetAllLocationById(int? id)
{
var data = _context.Stations.Where(m => m.Id == id).SingleOrDefault();
return Json(data);
}
And the JavaScript function: 和JavaScript功能:
function GoToLocation(locationId) {
$.get("/UserMap/GetAllLocationById?id=" + locationId,
function (data, status) {
if (data != null) {
map.setCenter(new google.maps.LatLng(data.latitudine, data.longitudine));
map.setZoom(17);
} else {
map.setZoom(13);
map.panTo(new google.maps.LatLng(46.770920, 23.589920));
}
}
)
}
NOTE: if the data
is null, i let him zoom-out the map, because that's what i wanted to do if choosing Choose a station
from the drop-down, which was coming as null. 注意:如果
data
为空,我让他缩小地图,因为如果选择从下拉列表中Choose a station
,那就是我想要做的事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.