6

まず、私の英語が下手なので申し訳ありません。

グーグルマップで困っています。div でマップを取得しようとしていますが、この div に position:fixed が必要です。

私の問題は、divの位置を変更するため、マップを描画した後です。最初は固定で、描画後は相対でdivの位置を変更します。

これが私のコード、HTMLです

<div class="verMapa"> SEE MAP </div>        
<br><br><br>        
<div>
  <div id="mask" style="display:none; background-color:#000000; position:absolute; right:0; top:0; z-index:9000;"></div>

  <div id="capaMapa" style= "display:none; background-color:white; position:fixed; top:50%; left:50%; width:600px; height:400px; margin-top:-200px; margin-left:-300px;z-index:9900;">
  </div>
</div>

コード Javascript

var map = null;

$(document).ready(function(){

    //Evento click en Mask que cierra el mapa.
    $("#mask").click(function(){    
        $('#mask').hide();
        $('#capaMapa').hide();
        $('#capaMapa').html("");
    });


    //Evento click en ver mapa
    $(".verMapa").click(function(){ 

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth, 'height':maskHeight});

        //transition effect
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.5);

        //transition effect
        $('#capaMapa').fadeIn(2000);

        initialize(40, -1);

    });

});


function initialize(latitud, longitud) {              

    myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(latitud, longitud),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    //inicializamos el mapa.
    map = new google.maps.Map(document.getElementById("capaMapa"), myOptions);  

}

「マップを見る」をクリックすると、マップは正しく表示されますが、firebug のコードが表示されるとエラー位置になります。div "capaMapa" のスタイルが変更され、position:relative になり、この div はエラー位置に描画されます。

マップの初期化後にこの変更が見られました。「map = new google.maps.Map(document.getElementById("capaMapa"), myOptions);」この行にコメントを付けると、正しい位置に div を描画するためです。

何か提案はありますか？

4

1 に答える 1

6

マップを含む DOM 要素 (この#capaMapa例では) には常にposition: relative;. 意図したとおりにスタイルできる別の要素で囲んでみてください。

<div id="capaMapa"><div id="map-canvas"></div></div>

あなたのCSS:

#capaMapa {
    display:none;
    background-color:white;
    position:fixed;
    top:50%;
    left:50%;
    width:600px;
    height:400px;
    margin-top:-200px;
    margin-left:-300px;
    z-index:9900;
}

#map-canvas {
    position: relative; /* Will be set by the Maps API anyway */
    width: 100%;
    height: 100%;
}
于 2013-01-17T14:31:24.690 に答える