Google 将地址列表映射到 Javascript

Question

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

在同一个视图中，我有一个 javascript 代码来生成一个 Google 带有使用客户端经纬度标记的地图。

我没有开发经验，我不知道这是否是最好的方法，但我的问题是：我怎样才能在我的 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

让我们假设控制器 returns 以下集合：

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

Google 将地址列表映射到 Javascript

Google Maps Address List to Javascript

javascript

google-maps

google-maps-markers