从剃刀视图中的foreach循环获取项目值到js数组

Question

我正在尝试使用从剃刀视图中的模型到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);
    }

Answer 1

您拉出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]),