javascript - 无法使用 json 向 jvectormap 显示数据
问题描述
我有一个问题,我已经处理了 2 天,但找不到解决方案。我使用地图 jvectormap 插件和土耳其。我从 mssql 数据库中获取数据,然后 Json 将其导入我的页面。我将数据动态分配给“标记”变量,但我的数据绝不会在地图上可见。
有趣的是,当我手动将 json 数据添加到“标记”变量时,地图可以正常工作。
我可能把我的问题描述得有点奇怪,对此我很抱歉。
默认控制器
[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',
}]
}
});
})
});
不显示任何数据 在此处输入图像描述
控制台日志
控制台.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
当我手动将出现在 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' } }
];
我的问题有点过分了,对此我深表歉意,非常感谢您在此问题上可以提供帮助的朋友。
解决方案
您可以通过代码片段的颜色来判断您生成的数据类型存在很大差异。基本上,您正在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"
}
});
});
推荐阅读
- php-carbon - PHP Carbon 是否具有使用类似 strtotime() 的字符串的日期调整功能接受
- ffmpeg - 浏览器下载视频流而不是播放它
- r - 使用循环在R中读取和写入多个文件
- adfs - What is the default value of concurrent users can login to ADFS saml authentication?
- shopify - 公共 shopify 应用程序将如何呈现给商店访问者
- javascript - JavaScript 从异步获取中访问数据
- django - 未调用覆盖的清理函数
- python - 如何使用“matplotlib.pyplot”在不同的窗口中绘制我的图表?
- c++ - 如何在 Qt creator 4.8 中使用 C++11
- php - 将对象值替换为数组