如何使用本地json文件创建热图（Bing地图）？

我想从本地数据存储在geoJson文件中创建Bing地图的热图，但我不能让它工作......奇怪的是，如果完全相同的文件在线是绝对没有问题的。这里是我正在使用的脚本：如何使用本地json文件创建热图（Bing地图）？

<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>

我真的不明白这里有什么问题。

非常感谢！

来源

2016-09-06 JulienD

我编辑了你的问题，使其更清晰一些。 – byxor

两者都适合我，当我尝试。请确保您的本地文件与您的网页位于相同的位置，因为您的网址是相对网址。即如果您的网页是http://mywebsite.com，则您提供的网址预计该文件位于http://mywebsite.com/data/all+month.geojson。

如果您确实想要访问用户文件系统上的文件，则必须使用HTML5 FileReader API，因为URL无法访问用户文件系统。

来源

2016-09-06 16:31:14 rbrundritt

谢谢，我意识到这个文件确实在我的文件系统上，当我试图得到它时，因此问题 – JulienD

这是一个使用FileReader API读取GeoJSON文件的代码示例：https://msdn.microsoft.com/ EN-US /库/ mt750523.aspx – rbrundritt

如何使用本地json文件创建热图（Bing地图）？

回答

相关问题