推值JavaScript数组返回大量的错误 [英] Pushing values to javascript array returning lots of errors

问题描述

我特林以填补我可以用它来放标志物，从我的模型地图上的经纬度多头JavaScript数组，但它充满了错误，我不知道为什么。

 ＆LT; D​​IV ID =地图＆GT;＆LT; / DIV＆GT;
＆LT;脚本＆GT;    VAR地图，
    分= [];    @foreach（型号中的一个变种）{
        //错误：名称'点'不存在于当前上下文存在
                   //错误：）预期;预计（在前端和末端支架）
        points.push（{纬度：@ a.Lat，LNG：@ a.Lon}）;
    }    功能initMap（）{
        地图=新google.maps.Map（的document.getElementById（'地图'）{
            中心：{纬度：-34.397，经度：150.644}，
            变焦：8
        }）;
        //错误：名称'点'不存在于当前上下文存在
        @foreach（在分变种P）{
            VAR的标记=新google.maps.Marker（{位置：P}）;
            //错误：名称'标记'不存在于当前上下文存在
            //错误：名称地图不在当前上下文中存在
            marker.setMap（地图）;
        }
    }＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =htt​​ps://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap
    异步推迟＆GT;＆LT; / SCRIPT＆GT;
 

模型

 公共类的车辆
{
    [键]
    公众诠释ID {搞定;组; }
    公共小数经度{搞定;组; }
    公共小数纬度{搞定;组; }
    公共字符串VehType {搞定;组; }
    公共字符串驱动{搞定;组; }
}
 

解决方案

@foreach（）是剃刀code。它被发送到鉴于其之前在服务器上进行评估。 点是一个客户端的JavaScript变量，它不会在该点存在 - 它不是在范围内。相反，你可以使用你的模型分配到一个JavaScript数组 @ Html.Raw（Json.En code（模型）。然后，您的脚本将

  VAR模型= @ Html.Raw（Json.En code（型号））; //忽略恼人的语法错误
分= [];
$。每个（模型，函数（指数，项目）{
    points.push（{纬度：item.Lat，经度：item.Lon}）
}）
功能initMap（）{
    地图=新google.maps.Map（的document.getElementById（'地图'）{
        中心：{纬度：-34.397，经度：150.644}，
        变焦：8
    }）;
    对于（VAR I = 0; I＆LT; points.length;我++）{
        VAR的标记=新google.maps.Marker（{位置：分[I]}）;
        marker.setMap（地图）;
    }
}
 

I'm tring to fill a javascript array with lat longs that I can use to put markers on a map from my model but it's riddled with errors and I'm not sure why.

<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>

Model

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

解决方案

@foreach() is razor code. It is evaluated on the server before its sent to the view. points is a client side javascript variable which does not exist at that point - its not in scope. Instead, you can assign your model to a javascript array using @Html.Raw(Json.Encode(Model). Your script would then be

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

这篇关于推值JavaScript数组返回大量的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！