麻烦渲染谷歌地图热图层通过网址

时间:2012-08-28 16:29:58

标签: google-maps google-maps-api-3

我一直在尝试使用google地图javascript api v3处理热图图层。我可以创建一个html页面,加载地图和热图图层并从我的本地机器打开它,它工作正常。但是,当我尝试通过网址打开同一页面时,地图呈现但热图图层却没有。这是我想加载的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 个答案:

答案 0 :(得分:0)

热图图层由Google服务器提供,该服务器必须读取您的数据才能创建图层。你的防火墙允许这个吗?