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

时间:2019-01-10 12:55:16

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

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

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

地理位置类:

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

我正在ViewBag中将此列表从控制器发送到视图。

Viewbag:ViewBag.GeoList = AllGeoLocations; 在脚本下的视图中,在坐标数组中的标记数组中:{},我想使用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>

1 个答案:

答案 0 :(得分:0)

尝试以下方法,这可能会对您有所帮助。 注意:我尚未测试此代码(未执行)

< 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
        });
    }
}