Блог

У меня проблема, с которой я сталкивался в течение 2 дней, но не мог найти решение. Я использую плагин map jvectormap и turkey. Я получаю данные из базы данных mssql и импортирую их в Json на свою страницу. Я динамически присваиваю данные переменной «markers», но мои данные никоим образом не видны на карте.

Интересно то, что когда я добавляю данные 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',
                            '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',
                        }]
                    }
                });

            })
            
        });
  

не показывает никаких данных
введите описание изображения здесь

Console.Log

console.log(маркеры);

 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
  

Когда я вручную добавляю данные, которые отображаются в консоли, в переменную «маркеры», я могу видеть данные без каких-либо проблем.

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

введите описание изображения здесь

Я слишком расширил свой вопрос, прошу прощения за это, заранее большое спасибо моим друзьям, которые могут помочь в этом вопросе.

По цветам фрагментов кода можно определить, что существует большая разница в типах данных, которые вы генерируете. По сути, вы создаете строки в 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"
    }
  });
});