我正在尝试更改全景图的位置,但它显示的位置不同,有时则不会显示任何内容。
我可以在不加载页面的情况下重新创建全景视图吗?
由于
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>