谷歌地图 v3 热图未在页面加载时显示答案

【问题标题】：google maps v3 heatmap not displaying on page load谷歌地图 v3 热图未在页面加载时显示
【发布时间】：2013-08-01 22:30:45
【问题描述】：

我有一个映射页面，它检索 json 响应并创建相关的点数组以加载热图。

所有这些都在所需的初始化查询中，该查询已在 jquery document.ready 中调用。

但奇怪的是，所有外部数据都返回正常并且填充正常，点数组也很好。

但是，当我在热图上调用 setMap(map) 方法时，它不会显示。但奇怪的是，如果我使用页面链接来打开或关闭它，它将显示。有任何想法吗？？ firebug 完全没有错误。

var map;
    var markers = [];
    var markerLatLngArray = [];


function toggleHeatmap() {
    heatmap.setMap(heatmap.getMap() ? null : map);
}

function initialize() {

var map_options = {
center: new google.maps.LatLng(53.4902, -7.96),
zoom: 7,
mapTypeId: google.maps.MapTypeId.TERRAIN,
draggableCursor: 'crosshair',
mapTypeControl: true,
scaleControl: true,
streetViewControl: false,
overviewMapControl: false,
overviewMapControlOptions: {
  opened: false
    }
};

map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
google.maps.event.addListenerOnce(map, 'idle', function(){
document.getElementById('ajax_loading_icon').style.display = "none";
document.getElementById('map_canvas').style.visibility = "visible"; 
});


    jQuery.get("<?php echo $data_url; ?>", {}, function(data) {
    jQuery(data).find("marker").each(function() {
    var marker = jQuery(this);

    var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                            parseFloat(marker.attr("long")));

    markerLatLngArray.push(latlng);

    });


    });   


    pointArray = new google.maps.MVCArray(markerLatLngArray);

    heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray
    });

    heatmap.setMap(map);

}

【问题讨论】：

@geocodezip 嘿，你的明星，你是对的，这是一个时间问题。该示例位于developers.google.com/maps/documentation/javascript/examples/…。唯一显着的区别是我使用的是 json。您的时间评论给了我一个想法，我将 heatmap.setMap(map) 添加到我的 google.maps.event.addListenerOnce(map, 'idle', function(){})。它立即起作用。太感谢了。如果您在下面添加一些与时间相关的小答案，我会立即接受。再次感谢。

标签： javascript google-maps-api-3 heatmap

【解决方案1】：

这是一个时间问题。在调用 heatmap.setMap 之前地图不会被初始化。

【讨论】：