我在这里有一个演示http://jsfiddle.net/coderslay/vQVTq/1/
我的Js文件
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var panoramaOptions = {
enableCloseButton : true,
visible: false
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView : panorama
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(panorama, "visible_changed", function() {
if (panorama.getVisible() && $("#pano").is(':visible')){
//moving the pegman around the map
}else if(panorama.getVisible() && $("#pano").is(':hidden')){
$("#pano").show();
$("#map_canvas").removeClass('bigmap');
$("#map_canvas").addClass('minimap');
latLngBounds = new google.maps.LatLngBounds();
latLngBounds.extend( new google.maps.LatLng(panorama.getPosition().lat(), panorama.getPosition().lng()));
map.panToBounds(latLngBounds);
map.fitBounds(latLngBounds);
}
google.maps.event.addListener(panorama, "closeclick", function() {
$("#pano").hide();
$("#map_canvas").removeClass('minimap');
$("#map_canvas").addClass('bigmap');
});
});
我的css文件
#container {
width:500px;
height: 500px ;
position: relative;
}
#map_canvas,
#pano {
position: absolute;
top: 0;
left: 0;
}
#map_canvas {
z-index: 10;
}
.bigmap{
width:100%;
height:100%;
}
.minimap{
width:50%;
height:100%;
}
现在发生的事情是,当我执行
map.panToBounds(latLngBounds); map.fitBounds(latLngBounds);
时,无论街景视图和法线视图如何,衣夹人都位于整个地图的中心。我希望将衣夹人显示在法线贴图的中心。怎么做? 最佳答案
在我看来,即使您将地图的宽度更改为50%,Google仍然认为地图的宽度为100%,并且不知道动态调整它。您可以尝试删除,然后以新宽度添加新地图。
或者,尝试使用地图panBy()
功能向左平移250个像素。
PS:为什么将全景相片的宽度设置为100%,而不是50%?