如何使用本地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地圖）？

回答

相關問題