劍道TabStrip和傳單地圖

Question

我正在嘗試使傳單地圖在Kendo Tabstrip中正常運行/繪制。

該選項卡由jsp頁面內的腳本定義。 Bootstrap用於處理放置。 當用戶單擊上一頁時，這將執行javascript並生成帶有要查詢的數據的選項卡，並從ajax數據源提供給結果選項卡。

javascript使用kendo腳本生成html元素，即kendo tabstrip。 調用模板腳本時，它確實會創建地圖，但是地圖中的數據無法正確呈現。 有灰色的瓷磚顯示。 如果您調整窗口大小，地圖將完美繪制。 從我在網上閱讀的所有內容看，這似乎與Leaflet有關在運行中創建的選項卡和容器存在問題。

我使用了Tabstrip上的“ show”事件來執行地圖填充（創建標記，設置這些標記的范圍等），因此至少我知道Tabstrip已打開，並且此時我更新了地圖。 這滿足了FireFox。 我使用L.Util.requestAnimFrame沒有成功。

L.Util.requestAnimFrame(map_realEstateDetails.invalidateSize,map_realEstateDetails,!1,map_realEstateDetails._container);

invalidateSize()也不會； 我已經在網上進行搜索，並且提供了多種解決方案。 我已經嘗試了所有方法，並且能夠使我的代碼在Firefox中工作，但不能在Chrome或IE中工作。

在jsp里面

script type="text/x-kendo-tmpl" id="templateNewRealEstateTab">
    div id="tabWrapperRealEstate_#=id#"
        div class="col-md-3 pt-15"
            div id="map_realEstateDetails" class="map_realEstateDetails" /div
        /div

在CSS

.map_realEstateDetails { height:320px; z-index: 0;}

javascript使用kendo腳本生成html元素，即kendo tabstrip

var newTabTemplate = kendo.template($('#templateNewRealEstateTab').html());


$("#realEstateDetailTabStrip").kendoTabStrip({show: popRealEstateMapDetails('newId')});

function positionRealEstateMapDetails() {

    if (map_realEstateDetails != null) {
    baseTileLayer = getBaseTileLayer();
    map_realEstateDetails = L.map('map_realEstateDetails', {
    center: [18.8964, 34.3794],
    zoom: 3,
    layers: [baseTileLayer] });
    }
}

function popRealEstateMapDetails(id){


    var del = [];
    $.ajax({
      url: urldel.delegations,
      async:false,
      success: function (listdel) {
          del = listdel;
      },
      dataType: "json"
    });

    var markers = {};
    markerMapGroup = new L.featureGroup();
    map_realEstateDetails.addLayer(markerMapGroup);

    for (var i = 0; i < del.length; i++) {
            if (del[i].id == delegationId) {
                console.log(del[i].id);
            markers[del[i].id] = L.marker(del[i].coordinates, {icon:_buildingIcon, title: del[i].tooltip});         
            markers[del[i].id].addTo(markerMapGroup);
            markers[del[i].id]._icon.id = del[i].id;
            var latlongs = [markers[del[i].id].getLatLng()];
            var markerBounds = L.latLngBounds(latlongs);
            map_realEstateDetails.fitBounds(markerBounds);
            map_realEstateDetails.setZoom(3);

            }


    }

我應該看到的是帶有相關標記的結果標簽欄中的傳單地圖。 可在FF中使用，但IE和Chrome需要調整窗口大小才能正確渲染地圖。 否則，地圖大部分為灰色。

Answer 1

因此，經過調試並得到了一位出色同事的幫助。 他發現了一個解決方案。 如果我們延遲使用標記填充地圖的功能的執行（setTimeout），並在該功能的末尾放入L.Util.requestAnimFrame....。 它可以在Chrome中使用！