jquctormapのjQuery.Deferred例外

私はjvectormapでマップを作っています。マップはjsonファイルのマークを読み取る必要があります。しかし、htmlを自分のサイトにアップロードすると、マップはロードされず、このコンテナのみが表示され、ブラウザウィンドウのサイズを変更すると、マーク付きのマップが表示されます。jquctormapの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ファイルを使用する必要があります。私は私のマップのパラメータの順序を変更してみました

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> 
<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：マップは私のhtmlファイルのコードhere

可能です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

この質問は、2を得た理由を理解することはできませんあなたのオンライン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で問題が見つかりました –

jquctormapのjQuery.Deferred例外

答えて

関連する問題