散热片在隐藏的Div [英] Heatmap Leaflet in a Hidden Div
问题描述
HTML代码
< ul class =nav nav-tabs nav-tabs-reverse nav-justified nav-justified-mobiledata-sortable-id =index-2>
< li class =active>< a href =＃map1data-toggle =tab>< i class =fa fa-picture-o mr-5 < I> /; < span class =hidden-xs> World Map< / span>< / a>< / li>
< li class =id =heatMap>< a href =＃heat-map2data-toggle =tab>< i class =fa fa-picture-o MR-5\" >< / I> < span class =hidden-xs>热图< / span>< / a>< / li>
< / ul>
< div class =tab-contentdata-sortable-id =index-3>
< div class =tab-pane fade active inid =map1>
< div class =panel-body p-0>
< div id =mapclass =height-sm width-full>< / div>
< / div>
< / div>
< div class =tab-pane fadeid =heat-map2>
< div class =panel-body p-0>
<！ - < div id =world-mapclass =height-sm width-full>< / div> - >
< div id =hmapclass =height-sm width-full>< / div>
< / div>
< / div>
< / div>
JS代码
map = L.map（'hmap'，{center：[53.15，-6.7]，zoom：10}）;
// OSM Baselayer
L.tileLayer（'http：// {s} .tile.osm.org / {z} / {x} / {y} .PNG'）AddTo就（地图）。
var kildareStyle = {
fillColor：＃CC9933，
color：＃000000，
weight：2，
fillOpacity：0.2
};
var pointStyle = {
radius：8，
fillColor：＃ff7800，
color：＃000，
weight：1，
opacity：1，
fillOpacity：0.8
};
// var kildare = new L.geoJson.ajax（'assets / kildare.geojson'，{style：kildareStyle}）。addTo（map）;
// var points = new L.GeoJSON.AJAX（'assets / kildare.geojson'）。addTo（map）;
// var heat = L.heatLayer（heat_points，{radius：12，blur：25，maxZoom：11}）addTo（map）;
google.maps.event.addListenerOnce（map，'idle'，function（）{
// debugger;
console.log（Now the map is in idle state）;
}）;
更新
我已经解决了这个问题，但现在我面临另一个错误，即热层不是一个功能。有人可以告诉我为什么我面临这个错误
我不知道这是一个正确的答案，摆脱这个愚蠢的错误的方法是在用户点击标签时对地图进行初始化。像这样
$（'＃heatMap'）。click（function（）{
map = 'hmap'，{center：[53.15，-6.7]，zoom：10}）;
// OSM Baselayer
L.tileLayer（'http：// { s} .tile.osm.org / {z} / {x} / {y} .png'）。addTo（map）;
var kildareStyle = {
fillColor ＃CC9933，
color：＃000000，
weight：2，
fillOpacity：0.2
};
var pointStyle = {
radius：8，
fillColor：＃ff7800，
color：＃000，
weight：1，
opacity：1 ，
fillOpacity：0.8
};
// var kildare = new L.geoJson.ajax（'assets / kildare.geojson'，{style：kildareStyle}）。 addTo（map）;
// var points = new L.GeoJSON.AJAX（'assets / kildare.geojson'）。addTo（map）;
// var heat = L.heatLayer（heat_points，{radius：12，blur：25，maxZoom：11}）addTo（map）;
google.maps.event.addListenerOnce（map，'idle'，function（）{
// debugger;
console.log（Now the map is in idle state）;
}）;
}）
如果没有帮助将此代码放在 settimeout 函数并将其设置为500毫秒。这将做什么是当用户单击选项卡时，jquery将等待500毫秒，然后它将触发代码。
希望这有助于
Hello I have 2 maps in tabs. One shows a simple map and the other shows the heat map. when the page loads the simple one is shown whereas the heat map is in the hidden div. When I click on the tab which has the heat map it does not display it properly until I resize the browser or the open the browser console. I have tried the resize option but that doesn't works. Can somebody tell me what should I do
HTML CODE
<ul class="nav nav-tabs nav-tabs-inverse nav-justified nav-justified-mobile" data-sortable-id="index-2">
<li class="active"><a href="#map1" data-toggle="tab"><i class="fa fa-picture-o m-r-5"></i> <span class="hidden-xs">World Map</span></a></li>
<li class="" id="heatMap"><a href="#heat-map2" data-toggle="tab"><i class="fa fa-picture-o m-r-5"></i> <span class="hidden-xs">Heat Map</span></a></li>
</ul>
<div class="tab-content" data-sortable-id="index-3">
<div class="tab-pane fade active in" id="map1">
<div class="panel-body p-0">
<div id="map" class="height-sm width-full"></div>
</div>
</div>
<div class="tab-pane fade" id="heat-map2">
<div class="panel-body p-0">
<!--<div id="world-map" class="height-sm width-full"></div>-->
<div id="hmap" class="height-sm width-full"></div>
</div>
</div>
</div>
JS CODE
map = L.map('hmap',{center: [53.15, -6.7],zoom: 10});
// OSM Baselayer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var kildareStyle = {
"fillColor": "#CC9933",
"color": "#000000",
"weight": 2,
"fillOpacity": 0.2
};
var pointStyle = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
//var kildare = new L.geoJson.ajax('assets/kildare.geojson', {style:kildareStyle}).addTo(map);
// var points = new L.GeoJSON.AJAX('assets/kildare.geojson').addTo(map);
// var heat = L.heatLayer(heat_points, {radius:12,blur:25,maxZoom:11}).addTo(map);
google.maps.event.addListenerOnce(map, 'idle', function() {
// debugger;
console.log("Now the map is in idle state");
});
Update
I have solved the issue but now I am facing another error that heat layer is not a function. Can somebody tell me why am I facing this error
I don't know if this is a correct answer or not but one way to get out of this stupid bug is to heatmap initialization when the user clicks on the tab. like this
$('#heatMap').click(function(){
map = L.map('hmap',{center: [53.15, -6.7],zoom: 10});
// OSM Baselayer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var kildareStyle = {
"fillColor": "#CC9933",
"color": "#000000",
"weight": 2,
"fillOpacity": 0.2
};
var pointStyle = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
//var kildare = new L.geoJson.ajax('assets/kildare.geojson', {style:kildareStyle}).addTo(map);
// var points = new L.GeoJSON.AJAX('assets/kildare.geojson').addTo(map);
// var heat = L.heatLayer(heat_points, {radius:12,blur:25,maxZoom:11}).addTo(map);
google.maps.event.addListenerOnce(map, 'idle', function() {
// debugger;
console.log("Now the map is in idle state");
});
});
If that does not helps put this code in settimeout function and set it to 500 milliseconds. what this will do is when the user clicks on the tab the jquery will wait for 500 milliseconds and then it will trigger the code.
Hope this helps
这篇关于散热片在隐藏的Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
