6

首先，对不起我的英语，因为不好。

我有一个谷歌地图的问题。我正在尝试在 div 中获取地图，并且我希望这个 div 的位置：固定。

我的问题是在绘制地图之后，因为改变了 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);  

}

单击 en“查看地图”后，如果我在 firebug 中看到代码，我可以正确看到地图，但在错误位置。div“capaMapa”中的样式已更改，现在位置：相对，此 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 回答