Google地图v3热图不会在网页加载时显示 [英] google maps v3 heatmap not displaying on page load

问题描述

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

所有这些都在所需的初始化查询中是加载在jquery document.ready中调用的。

这是一件很奇怪的事，虽然所有的外部数据都返回正常并且填充得很好，points数组很好还有。

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

  var map; 
 var markers = []; 
 var markerLatLngArray = []; 
 
 
函数toggleHeatmap（）{
 heatmap.setMap（heatmap.getMap（）？null：map）; 
 
 
函数初始化（）{
 
 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：{
打开：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; 
}）; 
 
 $ b $ j jQuery.get（<？php echo $ data_url;？>，{}，function（data）{
 jQuery（data）.find（标记）。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）; 
 
 
 $ / code> 




解决方案

时间问题。直到调用heatmap.setMap之后，才会初始化映射。

I have a mapping page which retrieves a json response and creates the relevant array of points to load a heatmap.

All of this is in the required initialize query which is loaded is called in a jquery document.ready.

Here is the strange thing though, all the external data is returning fine and being populated fine, the points array is fine also.

However when I call the setMap(map) method on the heatmap it does not display. But weirdly if I use an on page link to toggle it on or off it will display. Any ideas?? No errors at all in 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);

}

解决方案

It is a timing problem. The map is not initialized until after heatmap.setMap is called.

这篇关于Google地图v3热图不会在网页加载时显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！