ローカルJsonファイルを使用してヒートマップ（Bing Maps）を作成するにはどうすればよいですか？

Question

私はgeoJsonファイルに保存されているローカルデータからBing Mapsでヒートマップを作成しようとしていますが、動作させることはできません...奇妙なことに、全く同じファイルがオンラインであれば問題ありません。使用しているスクリプトは次のとおりです。

<script type='text/javascript'> 
function GetMap() { 
    var map = new Microsoft.Maps.Map('#myMap', { 
     credentials: 'my_bing_maps_key_(not_forgotten)', 
     zoom: 4 
    }); 

    //Load the GeoJSON and HeatMap modules 
    Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function() { 
     // Earthquake data in the past 30 days from usgs.gov 
     Microsoft.Maps.GeoJson.readFromUrl('data/all_month.geojson', function (shapes) { 
      var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, { radius: 5 }); 
      map.layers.insert(heatMap); 
     }); 
    }); 
} 
</script> 

ヒートマップレイヤーは表示されません。しかし、これで置き換えるだけでは、すべてが完全にうまくいきます。

<script type='text/javascript'> 
function GetMap() { 
    var map = new Microsoft.Maps.Map('#myMap', { 
     credentials: 'my_bing_maps_key_(not_forgotten)', 
     zoom: 4 
    }); 

    //Load the GeoJSON and HeatMap modules 
    Microsoft.Maps.loadModule(['Microsoft.Maps.GeoJson', 'Microsoft.Maps.HeatMap'], function() { 
     // Earthquake data in the past 30 days from usgs.gov 
     Microsoft.Maps.GeoJson.readFromUrl('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson', function (shapes) { 
      var heatMap = new Microsoft.Maps.HeatMapLayer(shapes, { radius: 5 }); 
      map.layers.insert(heatMap); 
     }); 
    }); 
} 
</script> 

私は本当に何が問題なのか分かりません。

ありがとうございます！

Answer 1

私は試してみるとどちらも私の仕事です。 URLが相対URLであるため、ローカルファイルがウェブページと同じ場所にホストされていることを確認してください。すなわち、あなたのウェブページがhttp://mywebsite.comの場合、あなたが提供したURLはファイルがhttp://mywebsite.com/data/all+month.geojsonであると予想します。

実際にユーザーファイルシステム上のファイルにアクセスする場合は、URLがユーザーファイルシステムにアクセスできないため、HTML5 FileReader APIを使用する必要があります。