谷歌地圖僅在某些瀏覽器中顯示熱圖圖層

我對Google地圖熱圖圖層有一個相當莫名其妙的問題：它在Firefox中顯示正常，但在Chrome或Safari中拒絕顯示。谷歌地圖僅在某些瀏覽器中顯示熱圖圖層

演示： http://dev.nomad.cm/projects/maps/map.html

無論是鍍鉻，也不拋出的Safari在控制檯中的任何錯誤，所以我真的沒有什麼具體的去。我懷疑可能的內存限制：我正在加載的緯度/長點的JSON是〜150,000項。不過，如果這是問題，我認爲會出現一個錯誤。

很簡單代碼（包括骨架HTML）：從JSON

<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>

樣品摘錄：

{ 
"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} 
] 
}

任何見解不勝感激。謝謝！

來源

2014-05-02 Alex Warofka

在我看來，你正試圖在數據加載之前渲染熱圖。你不應該在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); 
});

來源

2014-05-02 04:19:53 kevmc

現在我覺得非常愚蠢。我非常驚訝地發現（無論出於何種原因）它在Firefox中工作，但不是Chrome，我完全錯過了這個明顯的錯誤。謝謝！ –

谷歌地圖僅在某些瀏覽器中顯示熱圖圖層

回答

相關問題