我正在使用jvectormap制作 map 。 map 应该读取 json 文件的标记。但是，当我将 html 上传到我的网站时， map 未加载，仅加载其容器，当我调整浏览器窗口大小时，会出现带有标记的 map 。
当我点击检查项目时，出现以下警告:
jQuery.Deferred exception: Can not read property '0' of undefined TypeError: Can not read property '0' of undefined
并出现以下错误:
Uncaught TypeError: Can not read property '0' of undefined
如果我直接在脚本中加载标记，错误就会消失并且 map 看起来正确，但我需要使用 json 文件。 map 可用here
我的html文件的代码:
<html>
<head>
<title>Franquicias</title>
<script src="./jquery-3.2.1.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
<script src="./jquery-jvectormap-2.0.3.min.js" charset="utf-8"></script>
<script src="./jvectormap.mexico.js" charset="utf-8"></script>
<script src = "./markers.json"> </script>
</head>
<body>
<div id="mex-map" style="width:200vh; height:100vh;">
</div>
<script>
$(function mapa(){
$('#mex-map').vectorMap({
map: 'Mexico',
backgroundColor: '#b3d1ff',
series: {
regions: [{
values: {"c0": "1", "c1": "2"},
scale: ['#d9d4ca', '#b3d1ff'],
normalizeFunction: 'polynomial'
}]
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47',
r: 7
}},
markers: cdata
});
});
</script>
我的json:
var cdata = [{
"coords": [520, 360],
"name": "2 Junior",
"style": {"fill": "green"}
},
{
"coords": [530, 360],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [570, 330],
"name": "1 Master",
"style": {"fill": "pink"}
},
{
"coords": [620, 310],
"name": "2 Junior",
"style": {"fill": "green"}
},
{
"coords": [620, 325],
"name": "1 Master",
"style": {"fill": "pink"}
}]
我尝试更改 map 参数的顺序以及 html 加载的文件的顺序，但没有成功。
最佳答案
请求JSON使用$.ajax()或$.getJSON()而不是设置src的<script>到 JSON 的路径在<script src = "./markers.json"> </script> ，否则cdata不会被定义，然后调用.vectorMap()
$(function() {
$.getJSON("./markers.json")
.then(function(cdata) {
$('#mex-map').vectorMap({
map: 'Mexico',
backgroundColor: '#b3d1ff',
series: {
regions: [{
values: {
"c0": "1",
"c1": "2"
},
scale: ['#d9d4ca', '#b3d1ff'],
normalizeFunction: 'polynomial'
}]
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47',
r: 7
}
},
markers: cdata
});
})
.fail(function(jqxhr, textStatus, errorThrown) {
console.log(errorThrown)
})
})
关于javascript - jvectormap 中的 jQuery.Deferred 异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47065023/