0

ページ全体を占める複数のストリートビュー パノラマ (技術的には光球) を埋め込もうとしていますが、一度に表示されるのは 1 つだけです。

別のパノラマを作成し、それらを別の 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);

何か案は？

ありがとう

4

1 に答える 1

0

divを表示した後に初期化する必要があるかもしれないと思うので、最終的には次のようになります。

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

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

アップデート

それ以来、div を表示した後にマップのサイズ変更イベントを呼び出すことを提案するこの別の投稿を見つけました。これは同じ効果があると思います。

隠しエリアからのGoogleマップ表示

于 2013-12-30T15:23:10.443 に答える