jbecctormap의 jQuery.Deferred 예외

jvectormap으로지도를 만들고 있습니다. 지도는 json 파일의 마크를 읽어야합니다. 그러나 html을 내 사이트에 업로드하면지도가로드되지 않고이 컨테이너 만 표시되며 브라우저 창의 크기를 조정하면 표시가있는지도가 표시됩니다.jbecctormap의 jQuery.Deferred 예외

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이 성공하지 않고로드하는 파일의 순서. $.ajax() 또는 $.getJSON()를 사용하는 대신 <script src = "./markers.json"> </script>에 JSON 경로에 <script>의 src 설정

출처

2017-11-01 Juan Trinidad Mayo

를 요청 JSON, 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) 
    }) 
})

출처

2017-11-01 23:11:48 guest271314

나는 $ .getJSON으로 시도하지만 작동하지 않습니다. , 문제가 동일합니다 –

stacksnippets 또는 plnkr https://plnkr.co에서 문제를 재현 할 수 있습니까? – guest271314

이 질문이있어 이유를 이해 할 수 없습니다 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"} 
}

출처

2017-11-13 00:55:45 deblocker

맞습니까, 나는 지난 주 json에서 문제를 발견했습니다. –

답변

관련 문제