我一直在尝试使用 google maps 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>