如何更改Google api StreetViewPanorama中的视图/位置

时间:2018-02-13 13:40:30

标签: javascript google-maps google-maps-api-3

我正在尝试更改全景图的位置,但它显示的位置不同,有时则不会显示任何内容。

Location 1

Location 2

我可以在不加载页面的情况下重新创建全景视图吗?

由于

var panorama;

    $(document).ready(function () {
        $(".locationLink").click(function () {
            var index = $(this).attr('index');
            var by = $(this).attr('by');
            changeLocation(index, by);
        });
    });

    var locationsList = [{
        lat: 40.7784525,
        lng: -73.9589767,
        heading: 31.35,
        pitch: 0,
        zoom: 0,
        panoId: 'F:AF1QipMFjDabjIiv8AgkMaSMFFZixaBiLARqUl3aQ-_2'
    },
    {
        lat: 40.778483,
        lng: -73.9589043,
        heading: 346.96,
        pitch: 0,
        zoom: 0,
        panoId: 'F:AF1QipPd-l5QzKcGCTya5oHQXuGhamem2v2QfV9N9J16'
    }];

    function changeLocation(index, by) {

        var location = locationsList[index];

        var fenway = { lat: location.lat, lng: location.lng };

        if (by === 'pano')
            panorama.setPano(location.panoId);
        if (by === 'latlng')
            panorama.setPosition(fenway);
    }

    function initStreetViewPanorama(params) {

        panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {

            pano: params.panoId,
            zoom: params.zoom,
            pov: { heading: params.heading, pitch: params.pitch },
            addressControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }

        });
    }
    
    initStreetViewPanorama(locationsList[0]);
html,body { height:100%;}
#pano { width:100%; height:99%; }
<div>
    <a href="javascript:;" class="locationLink" index="0" by="pano">Location 1</a> |
    <a href="javascript:;" class="locationLink" index="1" by="pano">Location 2</a>
    <span><b> Change by Lat/Long </b></span>
    <a href="javascript:;" class="locationLink" index="0" by="latlng">Location 1</a> |
    <a href="javascript:;" class="locationLink" index="1" by="latlng">Location 2</a>
</div>
<br>
<div id="pano">
</div>

<script src="https://maps.googleapis.com/maps/api/js?">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0 个答案:

没有答案