無法使用 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);
        }

默認.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',
                        }]
                    }
                });

            })
            
        });

不顯示任何數據在此處輸入圖像描述

控制台.日志

控制台日志（標記）；

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

當我手動將出現在控制台中的數據添加到“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' } } 
            ];

在此處輸入圖片說明

我把我的問題擴展了一點，對此我深表歉意，非常感謝能在這個問題上提供幫助的朋友們。

Answer 1

您可以通過代碼片段的顏色判斷生成的數據類型存在很大差異。 基本上，您是在地圖無法使用的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"
    }
  });
});