2
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"       src="https://maps.google.com/maps?hl=en&amp;sll=37.936424,-107.814144&amp;layer=c&amp;cid=12115290478932730695&amp;panoid=YY_tNFWmbOaOJDV_zlAZ0A&amp;cbp=13,40.7,,0,5.57&amp;gl=US&amp;t=m&amp;cbll=37.936374,-107.814213&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=37.935914,-107.813505&amp;spn=0.004595,0.010568&amp;source=embed&amp;output=svembed"></iframe><br /><small><a href="https://maps.google.com/maps?hl=en&amp;sll=37.936424,-107.814144&amp;layer=c&amp;cid=12115290478932730695&amp;panoid=YY_tNFWmbOaOJDV _zlAZ0A&amp;cbp=13,40.7,,0,5.57&amp;gl=US&amp;t=m&amp;cbll=37.936374,-107.814213&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=37.935914,-107.813505&amp;spn=0.004595,0.010568&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

そこで埋め込みコードです。結果のコンテンツを自動的に回転させるにはどうすればよいのでしょうか? JSを使用できますか?

4

2 に答える 2

5

コンポーネントへのアクセスiframe

iframeいいえ、 Javascript からコンテンツにアクセスすることはできません。

Javascript の安全性ポリシーでは、埋め込まれた (i) フレームのドキュメントへのクロスドメイン アクセスは許可されていません。

これは、Same Orgin Policyと呼ばれます。

コンピューティングでは、同一生成元ポリシーは、JavaScript などの多くのブラウザー側プログラミング言語にとって重要なセキュリティ概念です。このポリシーでは、同じサイト (スキーム、ホスト名、およびポート番号の組み合わせ) からのページで実行されているスクリプトが、特定の制限なしで互いのメソッドとプロパティにアクセスすることを許可しますが、ページ間のほとんどのメソッドとプロパティへのアクセスを防ぎます。 [1] XMLHttpRequest と robots.txt にも同一オリジン ポリシーが適用されます。[2]


Google API の使用

ソリューションは、アプリケーションをサービス (この場合はストリートビュー) に接続できるGoogle APIを使用しています。

が必要だと思いますpanControl

panControlは、パノラマを回転する方法を提供します。このコントロールは、標準の統合コンパスおよびパン コントロールとしてデフォルトで表示されます。panControlOptions フィールド内に PanControlOptions を指定することで、コントロールの位置を変更できます。

( APIで「Street View Controls」を検索してください)

サンプル

最善の解決策ではありませんが、これが役立つと思います。headingこれにより、パノラマの が更新されます。

<DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Street View service</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var panorama;

        function initialize() {
            var fenway = new google.maps.LatLng(42.345573,-71.098326);
            var panoramaOptions = {
                position: fenway,
                pov: {
                heading: 4,
                    pitch: 10
                }
            };
            panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);

            var i = 0;
            window.setInterval(function () {
                panorama.setPov({
                    heading: i,
                    pitch: 10,
                    zoom: 1
                });
                i += 0.1;
            }, 10);
        }

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

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
  </body>
</html>

また、回転を止めたい場合は、 jQuery 関数を使用してformouseentermouseleavefor のハンドラを追加します。#panoon()

JSFIDDLEを参照してください

于 2013-05-16T16:46:29.270 に答える
0

注意してください。バイラライザーを使用すると、モスクワからサーバーに奇妙な接続が発生します。なのでマイページから削除しました。

于 2014-12-13T11:22:34.030 に答える