问题描述
我有一个问题已经解决了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' } }
];
我的问题有点过头了,对此我深表歉意,非常感谢能帮助您解决此问题的朋友。
解决方法
通过代码段的颜色可以看出,正在生成的数据类型有很大的不同。基本上,您是在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"
}
});
});