2012-08-28 72 views
0

我一直在嘗試與谷歌地圖javascript api v3一起使用熱圖層。我可以創建一個加載地圖和熱圖層的html頁面,並從我的本地機器打開它,它可以正常工作。但是,當我嘗試通過url打開相同的頁面時,地圖會呈現,但熱圖圖層不會。這裏是我試圖加載的HTML ...通過網址無法顯示谷歌地圖熱圖圖層

<!DOCTYPE html> 
<html> 
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
html { height: 100% }  
body { height: 100%; margin: 0; padding: 0 }  
#map_canvas { height: 100% }  
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script> 
<script type="text/javascript"> 
var map, heatmap, heatmapData; 
heatmapData = [ 
{location: new google.maps.LatLng(41.578898,-73.032746), weight: 89.2}, 
{location: new google.maps.LatLng(41.903280,-71.392380), weight: 417.3}, 
{location: new google.maps.LatLng(41.910259,-71.438038), weight: 149.7}, 
{location: new google.maps.LatLng(41.777443,-72.524997), weight: 62.15}, 
{location: new google.maps.LatLng(40.956380,-74.159033), weight: 6.7}, 
{location: new google.maps.LatLng(39.862774,-74.815854), weight: 24.21}, 
{location: new google.maps.LatLng(39.210240,-74.728080), weight: 583.6}, 
{location: new google.maps.LatLng(40.698180,-75.135480), weight: 694.95}, 
{location: new google.maps.LatLng(41.463349,-74.421398), weight: 231.8}, 
{location: new google.maps.LatLng(43.980552,-75.620903), weight: 411.1}, 
{location: new google.maps.LatLng(44.090947,-75.804665), weight: 565.5}, 
{location: new google.maps.LatLng(40.989418,-80.336151), weight: 24.65}, 
{location: new google.maps.LatLng(40.765717,-79.528243), weight: 898.13}, 
{location: new google.maps.LatLng(39.976830,-76.685313), weight: 91.25}, 
{location: new google.maps.LatLng(40.100343,-76.427234), weight: 823.77} 
]; 
function initialize() {  
    var mapOptions = {center: new google.maps.LatLng(40.765717,-79.528243), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP};   
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

    heatmap = new google.maps.visualization.HeatmapLayer({data: heatmapData, radius: 50}); 
    heatmap.setMap(map); 
} 
function toggleHeatmap() { 
heatmap.setMap(heatmap.getMap() ? null : map); 
} 
</script> 
</head> 
<body onload=initialize();>  
<div id="map_canvas" style="width:80%; height:80%"></div> 
<input type=button onclick="toggleHeatmap();" value="click"/> 
</body> 
</html> 
+1

您還有其他信息嗎?指向展現問題的地圖的鏈接或jsfiddle? – geocodezip

+0

如果你編輯你的問題來添加它,它可能會是最簡單的。 – geocodezip

+0

我無法提供鏈接,因爲它位於防火牆後面的開發環境中。我生成的頁面就像谷歌的網站上給出的例子一樣,並且在這兩種情況下地圖都會加載,但是當通過網址拖動時,圖層不會加載。 – user1630869

回答

0

熱圖圖層是由Google的服務器提供的,它必須讀取您的數據才能創建圖層。你的防火牆允許這個嗎?

+0

當我在本地打開html文件並且所有內容都位於同一防火牆後面時,將會顯示熱圖。只有當我嘗試從遠程位置(我的開發服務器)打開html文件時,它有問題。 – user1630869

+0

我應該補充一點,我也可以在我的開發服務器上在本地打開文件,並且它也可以正確渲染。 – user1630869