Question

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

首次加载页面时，将加载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>

Answer 1

两种不同的API使用不同的投影系统。 JS API根据浏览器使用不同的投影，因此它们不会排列

为什么StreetView JS API无法正确镜像StreetView Static API？

1 个答案: