谷歌地图地址列表为Javascript

Question

我有一个列表，其中包含我作为对象传递给我的视图的客户端的名称，纬度和长度。

在这个相同的视图中，我有一个JavaScript代码来生成带有标记的Google Map，使用客户端lat long。

我不熟悉开发，我不知道这是否是最好的方式，但我的问题是：我怎么能得到这个列表内我的JavaScript加载标记？

控制器：

public ActionResult Index() 
    { 
     List<object> ec = new List<object>(); 
     ec.Add(db.Estoques.ToList()); 
     ec.Add(db.Clientes.ToList()); 
     return View(ec); 
    } 

查看：

@model IEnumerable<object> 

@{ 
    List<selectgas.ADOs.ADOClientes> ListaClientes = Model.ToList()[1] as List<selectgas.ADOs.ADOClientes>; 
} 

<div id="map_wrapper"> 
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxevnGqIeXmmR_rZx6-aLMHFS6gZ2O3qs&callback=initialize"> 
    </script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      // execute 
      (function() { 
       // map options 
       var options = { 
        zoom: 5, 
        center: new google.maps.LatLng(39.909736, -98.522109), // centered US 
        mapTypeId: google.maps.MapTypeId.TERRAIN, 
        mapTypeControl: false 
       }; 

       // init map 
       var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

       // NY and CA sample Lat/Lng 
       var southWest = new google.maps.LatLng(40.744656, -74.005966); 
       var northEast = new google.maps.LatLng(34.052234, -118.243685); 
       var lngSpan = northEast.lng() - southWest.lng(); 
       var latSpan = northEast.lat() - southWest.lat(); 

       // set multiple marker 
       for (var i = 0; i < ListaClientes.lenght; i++) { 
        // init markers 
        var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(ListaClientes[i].Lat, ListaClientes[i].Long), 
         map: map, 
         title: 'Click Me ' + i 
        }); 

        // process multiple info windows 
        (function(marker, i) { 
         // add click event 
         google.maps.event.addListener(marker, 'click', function() { 
          infowindow = new google.maps.InfoWindow({ 
           content: 'Hello, World!!' 
          }); 
          infowindow.open(map, marker); 
         }); 
        })(marker, i); 
       } 
      })(); 
     }); 


    </script> 
    <div id="map_canvas" class="mapping"></div> 
</div> 

Answer 1

假设控制器返回以下集合：

public ActionResult Index() 
{ 
    var cities = new List<City>(); 
    cities.Add(new City() { Title = "Paris", Lat = 48.855901, Lng = 2.349272}); 
    cities.Add(new City() { Title = "Berlin", Lat = 52.520413, Lng = 13.402794 }); 
    cities.Add(new City() { Title = "Rome", Lat = 41.907074, Lng = 12.498474 }); 
    return View(cities); 
} 

其中

public class City 
{ 
    public string Title { get; set; } 

    public double Lat { get; set; } 

    public double Lng { get; set; } 
} 

然后JavaScript数组可以初始化这样的：

var cities = @Html.Raw(Json.Encode(Model)); 

Demo