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

【问题标题】：Embedding multiple streetviews but only one visible at a time嵌入多个街景，但一次只能看到一个
【发布时间】：2013-12-30 15:00:27
【问题描述】：

我正在尝试嵌入占据整页的多张街景全景图（技术上是照片球） - 一次只能看到一张。

我想我会创建单独的全景图并将它们附加到不同的 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);

有什么想法吗？

谢谢

【问题讨论】：

标签： jquery google-maps-api-3 photosphere

【解决方案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

【讨论】：

谢谢你——它为我指明了正确的方向。我最终为每个全景图编写了一个初始化函数，然后为每个缩略图链接添加了一个 onclick 事件，以便在需要时触发它们。