鸿运当头
鸿运当头
  • 发布:2015-12-29 16:37
  • 更新:2018-04-07 14:07
  • 阅读:4448

H5+百度地图加载后,地图容器DIV为何变成浮动了?如何固定位置?

分类:HTML5+

以下是我的验证代码,未加载H5+地图前,地图容器DIV是静态布局,点击按钮加载地图后,地图就成为浮动了?有办法固定住位置吗?

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <title>Map Example</title>  
        <script type="text/javascript">  
            var em=null,map=null;  
            // H5 plus事件处理  
            function plusReady(){  
                // 确保DOM解析完成  
                var button = document.getElementById('button');  
                button.addEventListener('click', function() {  
                    if(!em||!window.plus||map){return};  
                    map = new plus.maps.Map("map");  
                });  
            }  

            if(window.plus){  
                plusReady();  
            }else{  
                document.addEventListener("plusready",plusReady,false);  
            }  
            // DOMContentloaded事件处理  
            document.addEventListener("DOMContentLoaded",function(){  
                em=document.getElementById("map");  
                plusReady();  
            },false);  
        </script>  

        <style type="text/css">  

            #map {  
                width: 100%;  
                line-height: 200px;  
                text-align: center;  
                background: lightgoldenrodyellow;  
            }  

            #holder {  
                width:90%;  
                height: 1000px;  
                background-color: lightcoral;  
            }  
            #button {  
                position: fixed;  
                bottom: 20px;  
                right: 20px;  
                width: 100px;  
                height: 40px;  
            }  
        </style>  

    </head>  
    <body>  
        <div id="map">地图加载中...</div>  
        <div id="holder"></div>  
        <button id="button">map</button>  
    </body>  
</html>
2015-12-29 16:37 负责人:无 分享
已邀请:
朋也

朋也 - https://tomoya92.github.io

#map {  
  width: 100%;  
  position: fixed;  
  top: 45px;  
  bottom: 0px;  
  line-height: 200px;  
  text-align: center;  
  background: #FFFFFF;  
}
  • 鸿运当头 (作者)

    fixed定位就会“固定在屏幕”固定的位置,无论怎么滚动屏幕都会显示,而这个不是我想要的,我想让地图“固定在文档 ”,滚动屏幕可以被隐藏。

    2015-12-30 11:34

  • 朋也

    回复 鸿运当头:那就不要用demo里写的了,用百度地图的js版,想加载哪地方就加在哪地方,很方便

    2015-12-30 11:51

  • 鸿运当头 (作者)

    我用JS版已经解决了,我就是想把这个问题抛出来,看看能否填一下坑。

    2015-12-30 16:49

chender

chender - 与人为善

地图容器貌似不是div,是原生的对象,界面上的div只是方便原生的map控件进行定位,这个定位应该是绝对定位,所以滚动时就出现了浮动的效果

String

String - nstart

有找到解决方法吗???

鸿运当头

鸿运当头 (作者)

我后来没有使用H5的Map功能,使用了Web版的地图Api。

3***@qq.com

3***@qq.com

同问怎么解决

3***@qq.com

3***@qq.com

点开列表地图浮动到最上层,怎么解决,怎样禁止浮动,只在首页显示

m***@163.com

m***@163.com

同求,有解决方案了吗

该问题目前已经被锁定, 无法添加新回复