将值推送到 javascript 数组会返回很多错误 [英] Pushing values to javascript array returning lots of errors

问题描述

我正在尝试用经纬度填充 javascript 数组，我可以用它来在我的模型的地图上放置标记，但它充满了错误，我不知道为什么.

<脚本>无功地图，点数 = [];@foreach(模型中的变量 a){//错误:名称点"在当前上下文中不存在//错误:)预期；预期(在前端和后端括号)点推({纬度:@a.Lat，lng:@a.Lon})；}函数 initMap() {map = new google.maps.Map(document.getElementById('map'), {中心:{纬度:-34.397，长度:150.644}，变焦:8});//错误:名称点"在当前上下文中不存在@foreach(以点为单位的var p){var 标记 = 新的 google.maps.Marker({ position: p });//错误:名称标记"在当前上下文中不存在//错误:名称地图"在当前上下文中不存在标记.setMap(地图);}}<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"异步延迟></script>

型号

公共类车辆{[钥匙]公共 int ID { 获取；放;}公共十进制 Lon { 得到；放;}公共十进制纬度{得到；放;}公共字符串 VehType { 获取；放;}公共字符串驱动程序{获取；放;}}

解决方案

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

var model = @Html.Raw(Json.Encode(Model));//忽略烦人的语法错误"点数 = [];$.each(model, function (index, item) {点推({纬度:item.Lat，lng:item.Lon})})函数 initMap() {map = new google.maps.Map(document.getElementById('map'), {中心:{纬度:-34.397，长度:150.644}，变焦:8});for (var i = 0; i 

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