ASP.NET Razor MVC4 в Javascript. Карта Google не загружается

#javascript #jquery #asp.net-mvc-4 #razor #google-maps-api-3

Вопрос:

У меня возникли некоторые проблемы с setMarkers() функцией, и моя карта вообще не отображается. Я предполагаю, что я делаю что-то не так с синтаксисом Razor в функции setMarkers. Не могли бы вы, пожалуйста, предложить решение? Поскольку я не эксперт в этой технологии, нормально ли смешивать Razor с функциями Javascript или я должен следовать альтернативной лучшей практике, то есть перемещать функции моего скрипта в @section featured область? Заранее спасибо

Моя MarkerModel:

 public class MarkerModel
    {
        public string Description { get; set; }
        public double latitude { get; set; }
        public double longitude { get; set; }
        public int zIndex { get; set; }
    }

Мое мнение:

 @model IEnumerable<DAssistant.Web.Models.MarkerModel>

<style type="text/css">
    #map-canvas
    {
        height: 500px;
    }
</style>

@{
    ViewBag.Title = "Map"; 
}

@section featured {
    <div id="map-canvas"></div>
}

<script type="text/javascript" src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:''}]}"></script>
<script type="text/javascript">

    function init() {
        var mapDiv = document.getElementById('map-canvas');

        var mapOptions = {
            center: new google.maps.LatLng(-33.890542, 151.274856),
            zoom: 8,
            mapTypeControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapDiv, mapOptions);

        setMarkers(map);
    }

    function setMarkers(map) {

        @foreach (var item in Model)
        {
            <text>
            var myLatLng = new google.maps.LatLng(@item.latitude, @item.longitude);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: @item.Description,
                zIndex: @item.zIndex
            });
            </text>
        }
    }
    google.maps.event.addDomListener(window, 'load', init);
</script>

1. <div id=»map-canvas»></div>, я думаю, это должно быть в вашем теле, поправьте меня, если я ошибаюсь

2. Какие-либо ошибки в инструментах разработки браузера? Предварительный просмотр выглядит неправильно. Он определяет одни и те же переменные снова и снова.

3. В консоли javascript Chrome нет ошибок

Ответ №1:

Измените это:

 title: @item.Description

Для:

 title: '@item.Description'

Например, описание — это «некоторая строка», тогда заголовок будет:

 title: some string

Это недопустимый javascript.