Question

我有一个页面，其中包含许多Twitter Bootstrap选项卡。选项卡之一包含带有覆盖图的地图。我有一个侦听器，可以在选择“地图”标签时加载地图并叠加。

我想添加下载地图的功能。但是只有在选择了选项卡并渲染了地图之后，才能下载该文件。

因此，我需要一个下载按钮，该按钮首先选择选项卡（触发负载图和覆盖图），一旦完成，将触发地图下载功能。

我不希望用户仅选择选项卡时触发图像下载-仅当他们单击“下载”按钮时。

类似这样的东西：

<input type="button" value="Download" onclick="downloadMapImage()" />

和Javascript（伪代码）：

function downloadMapImage() {

  jQuery('#tab_species_map').tab('show', function() {

    imageGenerator.getBlob(function (mapImgBlob) {
        saveAs(mapImgBlob, "mapImage.png");
    }, function (e) {
        alert(e.message);
    });

  });

}

但这似乎不起作用。选项卡会更改，但不会触发回调。

我已经有一个用于选项卡更改的侦听器（几个选项卡具有地图）：

window.onload = function(){
    //Get the currently active tab.
    var activeTab = $(".nav-tabs li.active").children().attr('id');
    loadMap(activeTab);

    //Add an event to the tab that fires when a tab is shown.
    $('.nav-tabs a').on('shown.bs.tab', function(e){
        var selectedTab = $(e.target).attr('id');
        loadMap(selectedTab);
    });
};

加载图函数（又称为Bing映射加载函数）：

function loadMap(tabName){
  //Load the map instance if it hasn't already been loaded.
  switch(tabName){
    case 'tab_overview':
      if(!map_overview){
        loadmapOverview();
      }
      break;
    case 'tab_species_map':
      if(!map_species){
        loadmapSpecies();
      }
      break;
    default:
      break;
  }
}

任何建议，不胜感激。预先感谢。

引导选项卡上的回调。（“显示”）

0 个答案: