1

我正在尝试使用 JS StreetView API 让用户选择他们希望用于静态 StreetView 图像的视图。我已经在我的沙箱实例上构建了一个基本测试（以及未来的后代）。

当页面首次加载时，StreetView 视口会加载，并且反映该视口的静态图像会正确加载。如果我在没有我的位置的情况下平移，静态图像会正确更新。

我正在使用对pov_changed、position_changed和visible_changed事件进行调用来调用静态图像的更新。我在这些事件的触发之间延迟了半秒，以免引发配额错误。

我的问题是： 如果我使用任何“clickToGo”操作来更改我的位置，我的静态 StreetView 中显示的位置（纬度/经度）不会正确反映 JS StreetView 视口。据我所知，pov（fov/zoom、heading、pitch）都是正确的，但我的位置不正确。

<!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

两种不同的 API 使用不同的投影系统。JS API 根据浏览器使用不同的投影，所以它们不会排成一行

于 2012-04-13T15:08:46.970 回答