1

この例に従ってhttp://www.keypointpartners.com/test/mab/fromxml1.htmlと Google Maps API v3 ドキュメント (https://developers.google.com/maps/documentation/javascript/streetview) をまとめましたXML ファイルからマーカーを読み込み、読み込まれたマーカーごとにタブ付きの情報ウィンドウを表示するマップ。ロケーションに実際にストリートビューがあるかどうかを確認したいので、createMarker を次のように変更しました。

    function createMarker(latlng, name, html) {
      //var contentString = html;

      var contentString = [
        '',
        '',
        名前、
        '',
        '',
          '
  • 地方
    • '、
          '
  • ストラトゥーラ
    • '、
          '
  • ヴォリ
    • '、
          //'
  • オプション
    • '、
          '
  • ストリートビュー
    • '、
        '',
        html、
        ''
      ]。加入（''）;

      // マーカーを作成します
      var マーカー = 新しい google.maps.Marker({
        位置: 緯度,
        タイトル：名前、
        マップ: inc_map
      });

      // リスナーをマーカーに追加して、情報ウィンドウを設定して開きます
      google.maps.event.addListener(マーカー、「クリック」、関数() {
        infowindow.setContent(contentString);
        infowindow.open(inc_map, マーカー);
        google.maps.event.addListener(infowindow, 'domready', function() {
          inc_sv.getPanoramaByLocation(marker.position, 50, processSVData);
          //console.log("タブの追加");
          $('#tabs').tabs();
        });

      });

    getPanoramaByLocation で使用されるコールバック関数は次のとおりです。

        関数 processSVData(データ, ステータス) {
      if (ステータス == google.maps.StreetViewStatus.OK) {
        google.maps.event.addListener(infowindow, 'domready', function() {
          $('#stv-lnk').click(関数() {
            var panoramaOptions = {
              位置: data.location.latLng,
              可視: 真、
              リンクコントロール: false,
              パンコントロール: false,
              addressControl: 偽、
              zoomControlOptions: {
                スタイル: google.maps.ZoomControlStyle.SMALL
              }、
              enableCloseButton: false
            };
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("stvpano"), panoramaOptions);  
            inc_map.setStreetView(パノラマ);
          });
        });
        } そうしないと {
        google.maps.event.addListener(infowindow, 'domready', function() {
          $('#stv-lnk').click(関数() {});
          document.getElementById("stvpano").innerHTML = "Streetview は、すべてのタスクに対応していません"
          });
          }
    }

    ここで、最初のストリートビュー タブには何も表示されませんが、次にクリックされたストリートビュー タブには前のタブのストリートビューが表示されます。上記の API ドキュメントの例と比較すると、タブごとに個別の StreetViewPanorama オブジェクトを作成します (この例では、グローバル パノラマ変数を使用してそれを保持しています)。これは私の間違いですか？または...？実際のページへのリンク: http://turom-mice.it/condorincentive/incentive.html

    どんな助け/提案も大歓迎です! 乾杯、発疹*

    編集：わかりました、問題の1つを解決しました。eventListener をネストしすぎていました。関数 processSVData 内のものを削除し、各情報ウィンドウに正しいストリートビューが表示されるようになりました。コードは次のようになります。

        関数 processSVData(データ, ステータス) {
      if (ステータス == google.maps.StreetViewStatus.OK) {
        $('#stv-lnk').click(関数() {
          var panoramaOptions = {
            位置: data.location.latLng,
            可視: 真、
            リンクコントロール: false,
            パンコントロール: false,
            addressControl: 真、
            zoomControlOptions: {
              スタイル: google.maps.ZoomControlStyle.SMALL
            }、
            enableCloseButton: false
          };
          var panorama = new google.maps.StreetViewPanorama(document.getElementById("stvpano"), panoramaOptions);
         inc_map.setStreetView(パノラマ);
        });
       } そうしないと {
        $('#stv-lnk').click(関数() {
           inc_map.setStreetView(null);
           document.getElementById("stvpano").innerHTML = "Streetview は、すべてのタスクに対応していません"
        });
        }
    }

    問題は、'else' ブランチが何もしていないように見えることです: ある場所に利用可能なストリートビューがない場合、null に設定して div 内に警告テキストを入れても、最後に表示されたストリートビューが表示されます (表示する必要があります)。ただし、代わりのギャラリー ページへのリンク）。質問: これは正しいですか? または...？

    いつものように、ヘルプ/ヒント/提案...

    チャオ、発疹*

    EDIT 2：わかりました、完全に解決しました。else ブランチはクリック イベントを管理していなかったため、元の場所に戻すことで解決しました。上記のコードは、ソリューションを反映するように編集されています。

    とにかくありがとう、答えを待って、私はすべてを再考しました. これが誰かの助けになることを願っています。

    発疹*

    4

    0 に答える 0