嵌入多条街景，但一次只能看到一个

Question

我试图嵌入多个街景全景(技术上说，光圈)，占据整页-只有一个将在一次可见。

我想我应该创建单独的全景，并将它们附加到不同的div，隐藏除活动div之外的所有内容，然后使用一些缩略图链接来使用jQuery隐藏和显示相关的div。

这几乎是可行的，但最初隐藏的全景不显示任何图像(控件在那里，但图像本身不存在)。

我需要在API中设置什么吗？或者有更好的方法来做这件事？

我现在的代码是：

function carparkPano() {
  var carparkID = "GPHkasenHbQAAAAGOrVDmQ";
  var carpark = {
    pano: carparkID,
    pov: {
      heading: 290,
      pitch:15
    },
    zoom: 0,
    addressControl: false
  };
  var myPhotoSphere = new google.maps.StreetViewPanorama(
      document.getElementById('pano1'),
      carpark);
  myPano.setVisible(true);
}

function rooftopPano() {
  var rooftopID = "VaIS8soJyPAAAAAGOsbvQA";
  var rooftop = {
    pano: rooftopID,
    pov: {
      heading: 0,
      pitch:10
    },
    zoom: 1,
    addressControl: false
  };
  var myPhotoSphere = new google.maps.StreetViewPanorama(
      document.getElementById('pano2'),
      rooftop);
  myPano.setVisible(true);
}

google.maps.event.addDomListener(window, 'load', carparkPano);
google.maps.event.addDomListener(window, 'load', rooftopPano);

有什么想法吗？

谢谢

Answer 1

我认为您可能需要在显示div之后初始化它，这样它最终会看起来如下所示：

$(document).on('click', '#idOfElementTriggeringMap', function(){
    $('#pano2').show();
    ininitalizeMap('pano2');
  }
});

function initializeMap(map){
  // do map initialization here...
}

更新

此后，我发现了另一篇文章，建议在显示div之后，将地图的调整大小事件称为“调整大小事件”，我认为这将产生同样的效果：

Google map display from a hidden area