Используя массив из asp.net на JavaScript

Question

Я пытаюсь отобразить на карте некоторые маркеры динамически, используя массив из контроллера с широтой и долготой.

Что я должен сделать?
Проблема в том, как получить массив из C # и использовать его с JavaScript
Вот мой взгляд

@model IEnumerable<dynamic>
@{
    ViewBag.Title = "Mapa";

}
<style>
    #map {
        height: 400px;
        width: 100%;
    }
</style>

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: {lat: -33.9, lng: 151.2}
        });

        setMarkers(map);
    }

    var beaches = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    function setMarkers(map) {

        var shape = {
            coords: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };
        for (var i = 0; i < beaches.length; i++) {
            var beach = beaches[i];
            var marker = new google.maps.Marker({
                position: {lat: beach[1], lng: beach[2]},
                map: map,
            });
        }
    }
</script>

здесь его отображение lat и lng из массива

@foreach (dynamic item in Model)
{
    @item.Latitude<br/>
    @item.Longitude<br/>
}

Вот мой контроллер

public class MapaController : Controller
{
    private LocalizacaoFacade _localizacaoFacade = new LocalizacaoFacade();
    // GET: Mapa
    public ActionResult Index()
    {
        IEnumerable<Localizacao> lista = (IEnumerable<Localizacao>)_localizacaoFacade.getLocalizacao();
        ViewBag.Title = "Mapa teste";
        ViewBag.Lista = lista;

        return View(lista);
    }
}

Answer 1

Вызовите метод контроллера, используя Ajax в JavaScript, верните результат Json и используйте его для установки маркеров.

public class MapaController : Controller
{
    private LocalizacaoFacade _localizacaoFacade = new LocalizacaoFacade();

    public JsonResult GetGeoLoc()
    {
        IEnumerable<Localizacao> lista = (IEnumerable<Localizacao>)_localizacaoFacade.getLocalizacao();

        return Json(lista, JsonRequestBehavior.AllowGet);
    }
}

var baseUrl = window.location.origin

$.ajax({
            url: baseUrl + "/MapaController/GetGeoLoc",
            success: function (result) {
                if (result) {`enter code here`
                    //set the markers
                }
            },
            error: function (jqXhr, textStatus, errorThrown) {
                logErrors(jqXhr, textStatus, errorThrown);
            }
        });

Answer 2

Вы можете сделать это из Razor внутри скрипта, поместив каждый объект в массив javascript. Вы можете сделать это так:

<script type="text/javascript">

    var array= [];

    @foreach (var item in Model)
    {
        @:myArray.push("@item");
    }


</script>

Или, может быть, что-то подобное будет работать

Newtonsoft.Json.JsonConvert.SerializeObject (предупреждения)

<script type="text/javascript">

    var array= @Newtonsoft.Json.JsonConvert.SerializeObject(Model);

</script>