Question

您好我在标签中有2张地图。一个显示简单的地图，另一个显示热图。当页面加载时，显示简单的一个，而热图位于隐藏的div中。当我单击带有热图的选项卡时，在我调整浏览器大小或打开浏览器控制台之前，它无法正常显示。我已经尝试过调整大小选项，但这不起作用。有人可以告诉我该怎么办

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"); 
                    });

更新

我已经解决了这个问题，但现在我面临另一个错误，即加热层不是一个功能。有人可以告诉我为什么我会遇到这个错误

Answer 1

我不知道这是否是正确的答案，但是摆脱这个愚蠢错误的一种方法是在用户点击标签时热图初始化。像这样

$('#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"); 
                    });
});

如果这无助于将此代码放入settimeout函数并将其设置为500毫秒。这将做的是当用户点击选项卡时，jquery将等待500毫秒，然后它将触发代码。

希望这有帮助

在隐藏的Div中的热图传单

1 个答案: