如何将 Viewbag 数据中的 List 放入视图中的 javascript API 标记？答案

【问题标题】：How to put List in viewbag data to javascript API marker in view?如何将 Viewbag 数据中的 List 放入视图中的 javascript API 标记？
【发布时间】：2019-01-10 12:55:15
【问题描述】：

我有一个名为 Geolocations 的列表，其中包含纬度和经度。

List<Geolocation> AllGeoLocations = new List<Geolocation>();

地理位置类：

public class Geolocation
    {
        public string Latitude { get; set; }
        public string Longitude{ get; set; }
    }

我将 ViewBag 中的这个列表从控制器发送到视图。

查看包：ViewBag.GeoList = AllGeoLocations; 在脚本下的视图中，在标记数组中，在 coords 内：{} 我想将从控制器发送的纬度和经度值放入 Viewbag。

<script>
                    var map;
                    var src = 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml';
                    function initMap() {
                        // Map options
                        var options = {
                            zoom: 12,
                            center: { lat: 23.6850, lng: 90.3563 }
                        }

                        // New map
                        var map = new google.maps.Map(document.getElementById('map'), options);
                        // Array of markers
                        var markers = [

                            {
                                coords: { lat:  , lng:   },
                                content: '<h1></h1>'
                            }

                        ];
</script>

【问题讨论】：

标签： javascript c# ajax asp.net-mvc

【解决方案1】：

尝试以下方法，这可能会对您有所帮助。 注意：我没有测试过这段代码（未执行）

< script >
var map;
var src = 'https://s3-ap-southeast-1.amazonaws.com/cloudcreativeltd/Rail_Ex_RoW_my.kml';

function initMap() {
// Map options
    var options = {
        zoom: 12,
        center: {
            lat: 23.6850,
            lng: 90.3563
        }
    }

    // New map
    var map = new google.maps.Map(document.getElementById('map'), options);
    // Array of markers

    var geoArray = @Html.Raw(Json.Encode(@ViewBag.GeoList));

    for (var i = 0; i < geoArray.length; i++) {
        var myLatLng = new google.maps.LatLng(geoArray[i].Latitude, geoArray[i].Longitude);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map
        });
    }
}

【讨论】：