Jquery 嵌入多个街景,但一次只能看到一个
我正在尝试嵌入多张街景全景图(技术上说是照片),它们占据了整个页面——一次只能看到一张 我想我会创建单独的全景图,并将它们附加到不同的div,隐藏除活动div之外的所有div,然后使用一些缩略图链接,使用jQuery隐藏和显示相关div 这几乎可以实现,但最初隐藏的全景图不显示任何图像(控件在那里,但图像本身不显示) 我需要在API中设置什么吗?或者也许有更好的方法 我现在的代码是:Jquery 嵌入多个街景,但一次只能看到一个,jquery,google-maps-api-3,photosphere,Jquery,Google Maps Api 3,Photosphere,我正在尝试嵌入多张街景全景图(技术上说是照片),它们占据了整个页面——一次只能看到一张 我想我会创建单独的全景图,并将它们附加到不同的div,隐藏除活动div之外的所有div,然后使用一些缩略图链接,使用jQuery隐藏和显示相关div 这几乎可以实现,但最初隐藏的全景图不显示任何图像(控件在那里,但图像本身不显示) 我需要在API中设置什么吗?或者也许有更好的方法 我现在的代码是: function carparkPano() { var carparkID = "GPHkasenHbQA
function carparkPano() {
var carparkID = "GPHkasenHbQAAAAGOrVDmQ";
var carpark = {
pano: carparkID,
pov: {
heading: 290,
pitch:15
},
zoom: 0,
addressControl: false
};
var myPhotoSphere = new google.maps.StreetViewPanorama(
document.getElementById('pano1'),
carpark);
myPano.setVisible(true);
}
function rooftopPano() {
var rooftopID = "VaIS8soJyPAAAAAGOsbvQA";
var rooftop = {
pano: rooftopID,
pov: {
heading: 0,
pitch:10
},
zoom: 1,
addressControl: false
};
var myPhotoSphere = new google.maps.StreetViewPanorama(
document.getElementById('pano2'),
rooftop);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', carparkPano);
google.maps.event.addDomListener(window, 'load', rooftopPano);
有什么想法吗
谢谢我认为您可能需要在显示div后对其进行初始化,因此它最终会显示如下内容:
$(document).on('click', '#idOfElementTriggeringMap', function(){
$('#pano2').show();
ininitalizeMap('pano2');
}
});
function initializeMap(map){
// do map initialization here...
}
更新
此后,我发现了另一篇文章,建议在显示div后调用地图的resize事件,我认为这会产生相同的效果:
谢谢你,它为我指明了正确的方向。最后,我为每个全景图编写了一个初始化函数,然后向每个缩略图链接添加一个onclick事件,以便在需要时触发它们。