无法使用 json 向 jvectormap 显示数据

Question

我有一个问题，我已经处理了 2 天，但找不到解决方案。 我使用地图 jvectormap 插件和土耳其。 我从 mssql 数据库中获取数据，然后 Json 将其导入我的页面。我将数据动态分配给“标记”变量，但我的数据在地图上是不可见的。

有趣的是，当我手动将 json 数据添加到“markers”变量时，地图可以正常工作。

我可能描述我的问题有点奇怪，对此我很抱歉。

默认控制器

        [HttpGet]
        public JsonResult HaritaVeri()
        {
            List<vwSehirKoordinat> koordinat = db.vwSehirKoordinat.ToList();
            var Liste = (from s in koordinat select new vwSehirKoordinat { Kodu = s.Kodu, Il = s.Il, Yil = s.Yil, Adet = s.Adet, Koordinat = s.Koordinat });            
            return Json(Liste, JsonRequestBehavior.AllowGet);
        }

Default.cshtml

$(function () {
            
            var markers = [];
            $.ajax({
                url: '/Default/HaritaVeri',
                type: 'GET',
                async: false,
                dataType: 'json',
                data: '',
                success: function (data) {
                    $.each(data, function (index, option) {
                        markers.push('{latLng: [' + option.Koordinat + '], name: "Dosya Adedi: ' + option.Adet + '",style: {r: 8, fill: "#ff9900"}}');
                    });
                }
            }).done(function (result) {               

                $('.map-world-markers').vectorMap({
                    map: 'turkey_1_mill_en',
                    backgroundColor: 'transparent',
                    scaleColors: ['#90A4AE', '#78909C'],
                    normalizeFunction: 'polynomial',
                    regionStyle: {
                        initial: {
                            fill: '#ccc'
                        }
                    },

                    hoverOpacity: 0.8,
                    hoverColor: false,
                    markerStyle: {
                        initial: {
                            r: 7,
                            'fill': '#EF5350',
                            'fill-opacity': 1,
                            'stroke': '#fff',
                            'stroke-width': 1.5,
                            'stroke-opacity': 1
                        },
                        hover: {
                            'stroke': '#ccc',
                            'fill-opacity': 1,
                            'stroke-width': 2
                        }
                    },
                    focusOn: {
                        x: 0.1,
                        y: 0.1,
                        scale: 0.9
                    },

                    markers: markers,
                    
                    series: {
                        markers: [{
                            attribute: 'fill',
                            scale: ['#C8EEFF', '#0071A4'],
                            normalizeFunction: 'polynomial',
                            legend: {
                                vertical: true
                            }
                        }, {
                            attribute: 'r',
                            scale: [5, 20],
                            normalizeFunction: 'polynomial',
                        }]
                    }
                });

            })
            
        });

不显示任何数据 enter image description here

Console.Log

console.log(markers);

Array(37)
0: "{latLng: [37.00000000, 35.32133330], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
1: "{latLng: [38.76376000, 30.54034000], name: "Dosya Adedi: 29",style: {r: 8, fill: "#ff9900"}}"
2: "{latLng: [39.92077000, 32.85411000], name: "Dosya Adedi: 121",style: {r: 8, fill: "#ff9900"}}"
3: "{latLng: [36.88414000, 30.70563000], name: "Dosya Adedi: 197",style: {r: 8, fill: "#ff9900"}}"
4: "{latLng: [37.84440000, 27.84580000], name: "Dosya Adedi: 97",style: {r: 8, fill: "#ff9900"}}"
5: "{latLng: [39.64836900, 27.88261000], name: "Dosya Adedi: 48",style: {r: 8, fill: "#ff9900"}}"
6: "{latLng: [40.15013100, 29.98306100], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
7: "{latLng: [40.73947900, 31.61156100], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
8: "{latLng: [37.72690900, 30.28887600], name: "Dosya Adedi: 11",style: {r: 8, fill: "#ff9900"}}"
9: "{latLng: [40.18257000, 29.06687000], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
10: "{latLng: [40.15531200, 26.41416000], name: "Dosya Adedi: 7",style: {r: 8, fill: "#ff9900"}}"
11: "{latLng: [37.77652000, 29.08639000], name: "Dosya Adedi: 78",style: {r: 8, fill: "#ff9900"}}"
12: "{latLng: [41.66666670, 26.56666670], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
13: "{latLng: [39.78430200, 30.51922000], name: "Dosya Adedi: 6",style: {r: 8, fill: "#ff9900"}}"
14: "{latLng: [37.76666670, 30.55000000], name: "Dosya Adedi: 14",style: {r: 8, fill: "#ff9900"}}"
15: "{latLng: [36.80000000, 34.63333330], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
16: "{latLng: [41.00527000, 28.97696000], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
17: "{latLng: [38.41885000, 27.12872000], name: "Dosya Adedi: 802",style: {r: 8, fill: "#ff9900"}}"
18: "{latLng: [41.38871000, 33.78273000], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
19: "{latLng: [38.73333330, 35.48333330], name: "Dosya Adedi: 5",style: {r: 8, fill: "#ff9900"}}"
20: "{latLng: [37.86666670, 32.48333330], name: "Dosya Adedi: 14",style: {r: 8, fill: "#ff9900"}}"
21: "{latLng: [39.41666670, 29.98333330], name: "Dosya Adedi: 12",style: {r: 8, fill: "#ff9900"}}"
22: "{latLng: [38.61909900, 27.42892100], name: "Dosya Adedi: 108",style: {r: 8, fill: "#ff9900"}}"
23: "{latLng: [37.58333330, 36.93333330], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
24: "{latLng: [37.21527780, 28.36361110], name: "Dosya Adedi: 177",style: {r: 8, fill: "#ff9900"}}"
25: "{latLng: [38.62442000, 34.72396900], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
26: "{latLng: [37.96666670, 34.68333330], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
27: "{latLng: [40.75687930, 30.37813800], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
28: "{latLng: [41.29278200, 36.33128000], name: "Dosya Adedi: 3",style: {r: 8, fill: "#ff9900"}}"
29: "{latLng: [41.00000000, 39.73333330], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
30: "{latLng: [38.68230100, 29.40819000], name: "Dosya Adedi: 25",style: {r: 8, fill: "#ff9900"}}"
31: "{latLng: [39.82000000, 34.80444440], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
32: "{latLng: [41.45640900, 31.79873100], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
33: "{latLng: [39.84682100, 33.51525100], name: "Dosya Adedi: 2",style: {r: 8, fill: "#ff9900"}}"
34: "{latLng: [37.51638890, 42.46111110], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
35: "{latLng: [41.63444440, 32.33750000], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
36: "{latLng: [41.20000000, 32.63333330], name: "Dosya Adedi: 1",style: {r: 8, fill: "#ff9900"}}"
length: 37

当我手动将 consol 中出现的数据添加到“markers”变量中时，我可以毫无问题地看到数据。

var markers = [
                { latLng: [38.42, 27.14], name: 'Izmir', style: { r: 8, fill: '#ff9900' } },                
                { latLng: [36.54, 31.99], name: 'Antalya', style: { r: 8, fill: '#3366cc' } },
                { latLng: [38.75, 30.53], name: 'Afyon', style: { r: 8, fill: '#dc3912' } },
                { latLng: [38.630554, 27.422222], name: 'Manisa', style: { r: 8, fill: '#109618' } } 
            ];

enter image description here

我的问题有点过分了，对此我深表歉意，非常感谢在此问题上可以提供帮助的朋友。

Answer 1

您可以通过代码 sn-ps 的颜色来判断您生成的数据类型存在很大差异。基本上，您正在 markers 数组中创建地图不能使用的字符串，因为它需要对象。

很难说您的 $.each 函数应该是什么样子，因为您在 JavaScript 中使用了土耳其语，但它应该类似于下面的示例。

编辑：您的option.Koordinat 是这样的单个字符串：

'37.00000000, 35.321333330'

并且需要转换成浮点数的数组：

[37.00000000, 35.321333330]`

您可以通过在, （逗号和空格）处拆分字符串来做到这一点。然后你将有一个包含两个字符串的数组。现在使用map 循环遍历数组，返回相同的值但作为数字。

$.each(data, function(index, option) {
  markers.push({
    latLng: option.Koordinat.split(', ').map(coord => parseFloat(coord)), 
    name: `Dosya Adedi: ${option.Adet}`,
    style: {
      r: 8, 
      fill: "#ff9900"
    }
  });
});