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);、ストリートビューと通常のビューに関係なく、ペグマンがマップ全体の中心に来ています。ペグマンを法線マップの中央に表示させたいです。どうやってするの？

4

1 に答える 1

1

マップの幅を 50% に変更したにもかかわらず、Google はまだ 100% であると認識しており、動的に調整する方法を認識していないように思えます。代わりに、新しい幅で新しいマップを削除してから追加してみてください。

または、MappanBy()関数を使用して、左 250 ピクセルをパンしてみてください。

PS: パノラマの幅が 50% ではなく 100% に設定されているのはなぜですか?

于 2012-11-15T09:25:54.387 に答える