Несколько маркеров на Googe Map Api в MVC asp.net

Question

Я работаю над веб-приложением в Asp.net MVC, и мне нужно добавить несколько маркеров в Google Maps Api JavaScript.

В представлении я вызываю модель, которая представляет собой список объектов транспортных средств..

<script>



function initMap() {

    var myLatLng = { lat: 48.584715, lng: 7.748556 };

    // Create a map object and specify the DOM element
    // for display.
    var map = new google.maps.Map(document.getElementById('carte'), {
        center: myLatLng,
        zoom: 14
    });

    // Create a marker and set its position.

    @foreach(var item in Model){
         <text>
              var marker = new google.maps.Marker({
              map: map,
              position: { lat: @item.VehicleLocation.Latitude, lng: @item.VehicleLocation.Longitude },
              title: 'Hello World!'
        </text>
        }

}</script>

Я использую блок @foreach, чтобы разместить маркер для каждого объекта списка.

Без этой части @foreach мы можем видеть карту.Но когда я ставлю @foreach, карта не отображается.

Я не понимаю проблему

Как я могу ее решить?

Answer 1

ок!

, поэтому проблема была в моем определении объекта.Широта и долгота, где двойное значение, а не строковое значение.Итак, координаты где с запятой, а не с точкой

Я добавил два строковых поля в мой объект, и я преобразовал в него координаты:

В контроллере:

                foreach(var item in VehiculesList)
        {

            item.VehicleLocation.Lat_String = item.VehicleLocation.Latitude.ToString().Replace(",", ".");
            item.VehicleLocation.Long_String = item.VehicleLocation.Longitude.ToString().Replace(",", ".");
        }

В представлении:

<script>



function initMap() {

    var myLatLng = { lat: 48.584715, lng: 7.748556 };

    // Create a map object and specify the DOM element
    // for display.
    var map = new google.maps.Map(document.getElementById('carte'), {
        center: myLatLng,
        zoom: 14
    });

    // Create a marker and set its position.

    @foreach(var item in Model){
         <text>
              var marker = new google.maps.Marker({
              map: map,
              position: { lat: @item.VehicleLocation.Lat_String, lng: @item.VehicleLocation.Long_String },
              title: 'Hello World!'
            });
        </text>

    }

}</script>

Answer 2

Вы вызываете синтаксическую ошибку из-за того, что не закрыли свой вызов google.maps.Marker (...).

@foreach(var item in Model){
     <text>
        var marker = new google.maps.Marker({
          map: map,
          position: { lat: @item.VehicleLocation.Latitude, lng: @item.VehicleLocation.Longitude },
          title: 'Hello World!'
        });
    </text>
}

Обратите внимание на закрытие });