无法使用json将数据显示到jvectormap

如何解决无法使用json将数据显示到jvectormap

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

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

我可能对我的问题描述得有些奇怪，对此我感到抱歉。

DefaultController

        [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','stroke-width': 2
                        }
                    },focusOn: {
                        x: 0.1,y: 0.1,scale: 0.9
                    },markers: markers,series: {
                        markers: [{
                            attribute: 'fill',scale: ['#C8EEFF','#0071A4'],legend: {
                                vertical: true
                            }
                        },{
                            attribute: 'r',scale: [5,20],}]
                    }
                });

            })
            
        });

不显示任何数据 enter image description here

控制台。日志

console.log（标记）;

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

当我手动将控制台中显示的数据添加到“标记”变量时，我可以看到数据而没有任何问题。

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

enter image description here

我的问题有点过头了，对此我深表歉意，非常感谢能帮助您解决此问题的朋友。

解决方法

通过代码段的颜色可以看出，正在生成的数据类型有很大的不同。基本上，您是在markers数组中创建字符串，因为它需要对象，因此无法被地图使用。

由于您在JavaScript中使用了土耳其语，因此很难说出$.each函数的真正外观，但是它看起来像下面的示例。

编辑：您的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"
    }
  });
});