模型

Question

我正在尝试使用lat long来填充javascript数组，我可以使用它从我的模型中将标记放在地图上，但是它有很多错误，我不知道为什么。

<div id="map"></div>
<script>

    var map,
    points = [];

    @foreach (var a in Model) {
        //Error: The name 'points' does not exist in the current context
                   //Error: ) expected ; expected (at front and end brackets)
        points.push({ lat: @a.Lat, lng: @a.Lon });
    }

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
        //Error: The name 'points' does not exist in the current context
        @foreach (var p in points) {
            var marker = new google.maps.Marker({ position: p });
            //Error: The name 'marker' does not exist in the current context
            //Error: The name 'map' does not exist in the current context
            marker.setMap(map);
        }
    }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"
    async defer></script>

模型

public class Vehicle
{
    [Key]
    public int ID { get; set; }
    public decimal Lon { get; set; }
    public decimal Lat { get; set; }
    public string VehType { get; set; }
    public string Driver { get; set; }
}

Answer 1

@foreach()是剃刀代码。它在发送到视图之前在服务器上进行评估。 points是客户端javascript变量，此时不存在 - 它不在范围内。相反，您可以使用@Html.Raw(Json.Encode(Model)将模型分配到javascript数组。那么你的脚本将是

var model = @Html.Raw(Json.Encode(Model)); // ignore the annoying 'syntax error'
points = [];
$.each(model, function (index, item) {
    points.push({ lat: item.Lat, lng: item.Lon})
})
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
    for (var i = 0; i < points.length; i++) {
        var marker = new google.maps.Marker({ position: points[i] });
        marker.setMap(map);
    }
}

Answer 2

是的，因为在@foreach循环内部，它是C＃代码，而不是Javascript。而且您的points是一个Javascript变量，因此您不能像这样放置它。

要解决此问题，您有两种方法：

将其包裹在<text>标记内：

<text>points.push({ lat: @a.Lat, lng: @a.Lon });</text>

如果您的Javascript只有一行，您可以使用@:，如下所示：

@:points.push({ lat: @a.Lat, lng: @a.Lon });

将值推送到javascript数组会返回大量错误

模型

2 个答案: