1

JS StreetView APIを使用して、ユーザーが静的なストリートビュー画像に使用するビューを選択できるようにしようとしています。サンドボックスインスタンス（および将来の子孫のために以下）にある基本的なテストを作成しました。

ページが最初に読み込まれると、StreetViewビューポートが読み込まれ、そのビューポートを反映した静止画像が正しく読み込まれます。自分の位置から離れずにパンすると、静止画像が正しく更新されます。

pov_changed、、position_changedおよびイベントで行われた呼び出しを使用してvisible_changed、静止画像の更新を呼び出しています。クォータエラーを引き起こさないように、これらのイベントの発生の間に0.5秒の遅延を置きました。

私の問題は次のとおり です。「clickToGo」アクションのいずれかを使用して場所を変更すると、静的なストリートビューに表示される場所（緯度/経度）がJSストリートビューのビューポートを正しく反映しません。私が見ることができるものから、視点（視野/ズーム、見出し、ピッチ）はすべて正しいですが、私の場所は正しくありません。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">

          function initialize() {
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), {
              position: new google.maps.LatLng(42.345573,-71.098326),
              pov: {
                heading: 34,
                pitch: 10,
                zoom: 1
              }
            });

            /**
             * Build static URL from streetview JS instance settings
             */
            function getStaticUrl(secure) {
                secure = (secure) ? 's' : '';
                var latlng = panorama.getPosition();
                var pov = panorama.getPov();
                var url = "http" + secure + "://maps.googleapis.com/maps/api/streetview?size=500x400&location=" + encodeURIComponent(latlng.lat() + ", " + latlng.lng()) + "&fov=" + (180 / Math.pow(2, pov.zoom)) + "&heading=" + encodeURI(pov.heading) + "&pitch=" + encodeURI(pov.pitch) + "&sensor=false";
                console.log("lat: " + latlng.lat() + "     " + "lng: " + latlng.lng());
                console.log("img src: " + url);
                return url;
            }

            /**
             * To stop overusing quota errors with the static streetview API, wait half a second after streetview has stopped moving to
             * update image preview.
             */
            var _updateStreetViewWait = 0;
            var _handleStreetViewPovChange = function() {
                clearTimeout(_updateStreetViewWait);
                _updateStreetViewWait = setTimeout(function() {
                    var linkUrl = getStaticUrl();
                    $('#link').html("<a target='_blank' href='" + linkUrl + "'><img src='" + linkUrl + "'/></a>");
                }, 500);
            };
            google.maps.event.addListener(panorama, 'pov_changed', _handleStreetViewPovChange);
            google.maps.event.addListener(panorama, 'position_changed', _handleStreetViewPovChange);
            google.maps.event.addListener(panorama, 'visible_changed', _handleStreetViewPovChange);
          }
        </script>
    </head>
    <body onload="initialize()">
      <div id="pano" style="width: 500px; height: 400px"></div>
      <div id="link" style="width:100%; height: 2%"></div>
    </body>
</html>
4

1 に答える 1

1

2つの異なるAPIは、異なるプロジェクションシステムを使用します。JS APIはブラウザに応じて異なるプロジェクションを使用するため、それらは整列しません

于 2012-04-13T15:08:46.970 に答える