Question

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

我的谷歌地图有问题。我想在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>

CODE 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”已更改，现在位置：relative，此div在错误位置绘制。

我在初始化地图后看到此更改，“map = new google.maps.Map（document.getElementById（”capaMapa“），myOptions）;”因为如果我评论这一行，就要在正确的位置画出div。

有什么建议吗？

Answer 1

包含地图的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%;
}

谷歌地图V3 div位置固定变化相对

1 个答案: