2012-11-15 33 views
1

我這裏有一個演示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);那麼那個人就在整個地圖的中心,不管街景和普通視圖如何。我希望佩格曼能夠顯示在正常地圖的中心。怎麼做?

回答

1

在我看來,即使您已將地圖寬度更改爲50%,Google仍然認爲它是100%,並且不知道是否會動態調整它。您可以嘗試刪除,然後以新寬度添加新地圖。

或者,嘗試使用Map panBy()函數平移左側250像素。

PS:爲什麼pano設置爲100%寬度而不是50%?

+0

愛你的伴侶....感謝'panBy()'功能:) –