Question

所以我在asp.net MVC4 地理定位项目中工作，我在foreach循环中遇到问题，我的地图只显示最后一个位置，这是我的观点代码：

@model  List<AgencyWebApplication.Models.HomeModel>
 @foreach(var ch in Model)
    {
    <script>
        var city = '@Html.Raw(ch.adress)';
        var attitude = '@Html.Raw(ch.attitude)';
        var longitude = '@Html.Raw(ch.longidue)';
        var indice = '@Html.Raw(ch.indice)';
        var array = [[city, attitude, longitude, indice]];
    </script>
    }
    <script src="@Url.Content("~/Scripts/Map.js")" type="text/javascript"></script>
    <input type="submit" name="Go" value="Go" onclick="getMap(array)" />
    <div id="map_canvas" style="width:600px; height:400px"></div>

这是我的Map脚本代码：

function getMap(array) {

var myLatlng = new google.maps.LatLng(35.728329, -5.882750);
var mapOptions = {
    center: myLatlng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

setMarkers(map, array);
}

function setMarkers(map, locations) {

for (var i = 0; i < locations.length; i++)
{
    var place = locations[i];
    var myLatLng = new google.maps.LatLng(place[1], place[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: place[0],
        zIndex: place[3]
    });
}
return marker;
}

所以，如果您有任何想法，我会非常感激。

Answer 1

将您的模型序列化为视图模型属性，并在脚本中获取它，如

public class Geo{
 public string city{get;set;}
 public Decimal lat{get;set;}
 public Decimal lng {get;set;}
}

和视图模型

public class ViewModel{
 //other props
 public string GeoData{get;set;}
}

从db中填充

 var ViewModel vm = new ViewModel();
 vm.GeoData = new JavaScriptSerializer.serialze(/*get the Geo data and pass it here*/);

现在在视图中

<script>
 var geoData = $.parseJSON('@Html.Raw(Model.GeoData)');
 //here you can iterate the geo data and make use of it 
</script>

代码未经过测试可能包含一些语法错误，也建议使用Json.Net进行序列化

Answer 2

你的foreach每次都会重新分配变量“array”，因此在页面加载时只存在最后一个变量。尝试在浏览器中查看页面源代码，您将看到我的意思。

每次都需要将新值连接到数组。也许将数组分配给循环上方并在循环内部执行array.push（）。

将参数从模型传递到javascript

2 个答案: