我在使用 Google map 热图图层时遇到了一个相当令人困惑的问题:它在 Firefox 中显示正常，但在 Chrome 或 Safari 中却无法显示。
演示: http://dev.nomad.cm/projects/maps/map.html
Chrome 和 Safari 都不会在控制台中抛出任何错误，所以我真的没有任何具体的信息可以继续。我怀疑可能存在内存限制:我正在加载的纬度/经度点的 JSON 约为 150,000 个项目。不过，如果这是问题所在，我认为会抛出错误。
非常简单的代码(包括框架 HTML):
<html>
<head>
<title>Heatmap Test</title>
<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://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script type="text/javascript">
$.ajaxPrefilter( "json script", function( options ) {
options.crossDomain = true;
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var layoffLocs = new Array();
$.getJSON('map_points.json', function(data) {
$.each(data.points, function(i, value) {
layoffLocs.push(new google.maps.LatLng(value.lat, value.lon));
});
});
var pointArray = new google.maps.MVCArray(layoffLocs);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
// google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>
JSON 示例摘录:
{
"points":[
{"lat":40.025312,"lon":-83.091194},
{"lat":40.754308,"lon":-84.081579},
{"lat":40.141624,"lon":-82.978615},
{"lat":39.416894,"lon":-81.429982},
{"lat":39.450391,"lon":-84.476614}
]
}
非常感谢任何见解。谢谢!
最佳答案
在我看来，您正在尝试在数据加载之前渲染热图。 你不应该在 json 加载的回调函数中执行此操作，例如:
$.getJSON('map_points.json', function(data) {
$.each(data.points, function(i, value) {
layoffLocs.push(new google.maps.LatLng(value.lat, value.lon));
});
var pointArray = new google.maps.MVCArray(layoffLocs);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
});
关于javascript - Google map 热图图层仅在某些浏览器中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23420578/