Javascript 通过Jquery更改Google Fusion URL

我想用jquery更改google fusion的查询，这是我的地图：

var fusionid= "";
function initMap() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {lat: 28.3268, lng: 84.1855},
    zoom: 7
});

  var layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: fusionid,
      from: "1vgijexVJcXVdOP5b80dwzlLOUVv_fI8gr7fZyU-e",
      where: ""
    },
    options: {
      styleId: 2,
      templateId: 2
    }
  });
}

我试图用jquery更改fusion id，但什么也没发生：

$('#tm-male-2013').click(function(){
   fusionid = "1vgijexVJcXVdOP5b80dwzlLOUVv_fI8gr7fZyU-e";
   initMap();
});
$('#tm-male-2014').click(function(){
    fusionid = "some other id";
    initMap();
});

为什么它不起作用？？？

最后， 我找到了切换融合表样式的很好的解决方案，我们不需要像我那样创建许多融合表，只需要使用一个融合表，就可以通过复制地图来创建一些地图样式。然后它将生成

styleId

和

templateId

。下面是一个例子：

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {lat: 28.3268, lng: 84.1855},
    zoom: 7
  });

  var fussion = new google.maps.FusionTablesLayer({
      map: map,
      heatmap: { enabled: false },
      query: { select: "col0", from: '1XjEJd8JR-c3yHaSyrKC_mN8LCY1YG1Kiazn5TXlG'},
      options: { styleId: 2, templateId: 2}
    });

fussion.setMap(map);

$('#tm-male-2013').click(function(){
    fussion.setMap(null);
    fussion = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: { enabled: false },
        query: { select: "col0", from: '1XjEJd8JR-c3yHaSyrKC_mN8LCY1YG1Kiazn5TXlG'},
        options: { styleId: 2, templateId: 2}
      });
    fussion.setMap(map);
  });
  $('#tm-male-2014').click(function(){
    fussion.setMap(null);
    fussion = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: { enabled: false },
        query: { select: "col0", from: '1XjEJd8JR-c3yHaSyrKC_mN8LCY1YG1Kiazn5TXlG'},
        options: { styleId: 6, templateId: 7}
      });
    fussion.setMap(map);
  });

如果这个答案对你有帮助，请投票

谢谢,