Question

我正在使用jvectormap制作地图。地图应该读取json文件的标记。但是，当我将html上传到我的网站时，未加载地图，只加载了此容器，当我调整浏览器窗口大小时，会显示带有标记的地图。

当我点击检查项目时，会出现以下警告：

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

如果我直接在脚本中加载标记，错误就会消失并且地图看起来正确，但我需要使用json文件。该地图可用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"}
}]

我尝试更改地图参数的顺序以及html加载的文件顺序没有成功。

Answer 1

使用JSON或$.ajax()请求$.getJSON()，而不是将src的{{1}}设置为<script> JSON的路径，否则将不会定义<script src = "./markers.json"> </script>，然后调用cdata

.vectorMap()

Answer 2

无法理解为什么这个问题有两个upvotes，无论如何，你的在线json文件中有一个拼写错误：

{
    "coords": [360, 200],
    "name": "2 Master",
    "style": {"fill": "pink"}
},
{
    "coord": [220, 100], <---- should be coords
    "name": "2 Master",
    "style": {"fill": "pink"}
},
{
    "coords": [230, 100],
    "name": "1 Junior",
    "style": {"fill": "green"}
}

jvectormap中的jQuery.Deferred异常

2 个答案: