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

Question

我正在尝试根据存储在 geoJson 文件中的本地数据在 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>

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

非常感谢！

Answer 1

当我尝试时，两者都对我有用。确保您的本地文件与您的网页托管在同一位置，因为您的 URL 是亲戚 URL。即，如果您的网页是 http://mywebsite.com, the URL you provided expects the file to be at http://mywebsite.com/data/all+month.geojson。

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

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

How can I use local json file to create a heat map (Bing Maps)?

javascript

heatmap

bing-maps

geojson