[英]getting item value from foreach loop in razor view to js array
我正在嘗試使用從剃刀視圖中的模型到js中的數組的數據,以便在google map上顯示多個標記。到目前為止,我所做的一切都將數據作為innerHtml和無法傳遞的地圖進行傳遞顯示任何標記。
@foreach (var item in Model.UpcomingLectureGigs)
{
<div class="well">
<h1>blabla</h1>
@*Parm*@
<span class="js-latmaps">@item.Latitude </span>@*DataOk*@
<span class="js-lngmaps">@item.Longitude </span>@*DataOk*@
<span class="js-name">@item.Venue</span>@*DataOk*@
</div>
}
<hr />
<div class="well">
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</div>
@section scripts {
<script type="text/javascript">
var markers = [
{
"lat": $(".js-latmaps"),
"lng": $('.js-lngmaps'),
"description": $('.js-name')
//"lat":37.777698,// Ok
// "lng":-100.0227294,//Ok
//"description":"myShop"//Ok
}
];
console.log(markers);
window.onload = function () {
var mapOptions = {
center: new window.google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
var infoWindow = new window.google.maps.InfoWindow();
var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new window.google.maps.LatLng(data.lat, data.lng);
var marker = new window.google.maps.Marker({
position: myLatlng,
get map() { return map; }
});
(function (marker, data) {
window.google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
};
</script>
嬰兒推車
public ActionResult Index(string query = null)
{
//ToDo refactor
int myDayOfWeek = 0;
DateTime dt = DateTime.Today;
myDayOfWeek = (int) dt.DayOfWeek;
var upCommingLecture = _context.LectureGigs
.Include(g => g.Artist).Include(g => g.Genre)
.Where(g => (g.DateTime < DateTime.Now && !g.IsCanceled
|| (g.IsWeekLy == true
&& (int) g.Days == (myDayOfWeek))));
if (!string.IsNullOrWhiteSpace(query))
{
upCommingLecture = upCommingLecture
.Where(g =>
g.Artist.Name.Contains(query) ||
g.Genre.Name.Contains(query) ||
g.Venue.Contains(query) ||
g.NewRabiName.Contains(query));
}
var viewModel = new GigsViewModel
{
UpcomingLectureGigs = upCommingLecture,
//parm
SearchTerm = query,
};
return View("index", viewModel);
}
您拉出lat和lng的代碼正在推送jQuery對象,相反,我認為您可能必須進行一些格式化。
var arrLat = [];
$(".j-latmaps").each(function() {
var lat = $(this).html();
arrLat.push(lat);
});
並對經度執行相同的操作,然后傳遞數組。 中心將是:
center: new window.google.maps.LatLng(arrLat[0], arrLng[0]),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.