javascript - 在 ASP.net MVC2 中创建动态 javascript 的正确方法是什么？

Question

我正在我的项目中创建一个 Google map 部分 View /用户控件，它传递了一个包含纬度和经度值的强类型对象列表。

目前，这是我的部分代码:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Project.Models.Entities.Location>>" %>
<!-- Place for google to put the map -->
<div id="report_map_canvas" style="width: 100%; height: 728px; margin-bottom: 2px;">
</div>

<script type='text/javascript'>    
google.load("maps", "2");
$(document).ready(initializeMap);

function initializeMap() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById('report_map_canvas'));
        map.setCenter(new GLatLng(51.5, -0.1167), 2);
        <% foreach (var item in Model) { %>
        map.addOverlay(new GMarker(new GLatLng('<%= Html.Encode(item.latitude)%>','<%= Html.Encode(item.longitude)%>'),{ title: '<%= Html.Encode(String.Format("{0:F}",item.speed)) %> km/h '}));
        <% } %>
        map.setUIToDefault();
    }
}
</script>

通过遍历列表并发出 javascript，以这种方式动态创建 javascript 文件是否正确？

有更好的方法吗？

Answer 1

我不喜欢这种方式，因为如果你有很多项目要添加，你会为用户制作一个大文档来加载。相反，我更喜欢将项目加载为 JSON，然后迭代它们并使用谷歌函数，例如:

var data = [<%="{x:50.44444,y:30.44444,speed:50},..."  %>] // generate you JSON Here as array

for(var i = 0; i < data.length; i++){
map.addOverlay(new GMarker(new GLatLng(data[i].y,data[i].x),{ title: data[i].speed + 'Km/h'}));
}

所以你不会重复这部分

 map.addOverlay(new GMarker(new GLatLng(,),{ title:  + 'Km/h'}));

这会增加文档大小和页面负载