Question

我对Google地图热图图层有一个相当令人困惑的问题：它在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}
]
}

任何见解都非常感谢。谢谢！

Answer 1

让我觉得你在加载数据之前尝试渲染热图。你不应该在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);
});

Google地图热图图层仅在某些浏览器中显示

1 个答案: