当前位置： 文江博客话题详情

Bootstrap 3框架中如何显示百度地图JS

发布于 2022-09-06 14:56:58 字数 13072 浏览 17 评论 0

尝试在BT3中集成百度地图。但发现百度诸多方面与BT3的CSS有冲突，一旦将其放置到BT3的某个容器中，立刻不显示了。也参考了其他朋友们关于此类现象的解决方案，貌似没有帮助。

网址：

BAIDU map in plain HTML div
BAIDU map in Bootstrap3

原始百度地图源码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #map_canvas img {max-width: none;}
    #pio_info{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UA8wzSwsc8DVnPnFrhWqUzFoDzNrQAnD"></script>
    <title>Baidu map in Normal HTML div</title>
</head>
<body>
<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header">Baidu Map in plain HTML div</h1>
    <p>Baidu Map shows up in plain HTML div tag, switch to <a href="/accessview/bt3_baidu/1">Bootstrap 3</a></p> 
  </div>
</div>
<div id="allmap"></div>
<!--<div id="map_canvas"></div>-->
<div class="row">
  <div class="col-lg-12">
      <p class="pio_info">Information area</p>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    //var map = new BMap.Map("map_canvas");
    map.centerAndZoom(new BMap.Point(121.48,31.22), 11);  
    //Beijing for (116.404, 39.915), 11
    //Shanghai for (121.48 31.22), 11
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));      
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl()); 
    map.setCurrentCity("上海");
    // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     
    //开启鼠标滚轮缩放
</script>

BT3中的百度地图


<!DOCTYPE html>
<html>
  <head>
    <title>GLINK</title>
  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="/static/appbuilder/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/appbuilder/css/font-awesome.min.css" rel="stylesheet">
        

         <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
         <!--[if lt IE 9]>
            <script src="/static/appbuilder/js/html5shiv.js"></script>
            <script src="/static/appbuilder/js/respond.min.js"></script>
         <![endif]-->

        <link href="/static/appbuilder/datepicker/bootstrap-datepicker.css" rel="stylesheet">
        <link href="/static/appbuilder/select2/select2.css" rel="stylesheet">
        <link href="/static/appbuilder/css/flags/flags16.css" rel="stylesheet">
        <link href="/static/appbuilder/css/ab.css" rel="stylesheet">
    
    <link href="/static/css/epic.css" rel="stylesheet">

  <style type="text/css">
  body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  #map_canvas img {max-width: none;}
  </style>  
        <script src="/static/appbuilder/js/jquery-latest.js"></script>
        <script src="/static/appbuilder/js/ab_filters.js"></script>
        <script src="/static/appbuilder/js/ab_actions.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UA8wzSwsc8DVnPnFrhWqUzFoDzNrQAnD"></script>  

</head>

<body >

        <div class="modal fade" id="modal-confirm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                User confirmation needed
                </h4>
            </div>
            <div class="modal-body">
                <div class="modal-text"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id='modal-confirm-ok' class="btn btn-danger danger">OK</a>
            </div>
        </div>
    </div>
</div>
        <div class="modal fade" id="modal-alert" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <div><h4 class="modal-text"></h4></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
 
        <header class="top" role="header">
 
<div class="navbar navbar-inverse" role="navigation">
   <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            
                <span class="navbar-brand">
                <a href="/">
                GLINK
                </a>
                </span>
                            
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">


            </ul>
            <ul class="nav navbar-nav navbar-right">

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
       <div class="f16"><i class="flag gb"></i><b class="caret"></b>
       </div>
    </a>
    
    <ul class="dropdown-menu">
    <li class="dropdown">
        
            
                <a tabindex="-1" href="/lang/ru">
                  <div class="f16"><i class="flag ru"></i> - Russian
                </div></a>
                
            
            
            
            
                <a tabindex="-1" href="/lang/zh">
                  <div class="f16"><i class="flag cn"></i> - Chinese
                </div></a>
                
            
            
                <a tabindex="-1" href="/lang/pt_BR">
                  <div class="f16"><i class="flag br"></i> - Pt Brazil
                </div></a>
                
            
            
                <a tabindex="-1" href="/lang/pt">
                  <div class="f16"><i class="flag pt"></i> - Portuguese
                </div></a>
                
            
            
                <a tabindex="-1" href="/lang/de">
                  <div class="f16"><i class="flag de"></i> - German
                </div></a>
                
            
            
                <a tabindex="-1" href="/lang/pl">
                  <div class="f16"><i class="flag pl"></i> - Polish
                </div></a>
                
            
            
                <a tabindex="-1" href="/lang/es">
                  <div class="f16"><i class="flag es"></i> - Spanish
                </div></a>
                
            
        </li>
        </ul>
    
</li>


    <li><a href="/login/">
    <i class="fa fa-fw fa-sign-in"></i>Login</a></li>

            </ul>
        </div>
   </div>
</div>
        </header>
    

    <div class="container">
      <div class="row">
    
<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header">Baidu map in Bootstrap3</h1>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">        
    <div class="alert alert-warning alert-dismissable" id="flash">         
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Baidu Map doesn't show up in Bootstrap 3, switch to <a href="/accessview/plain_baidu/1">Baidu Map in plain div</a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div id="map_canvas"></div>
  </div>
</div>

      </div>
    </div>

    
        <footer>
        <div class="img-rounded nav-fixed-bottom">
            <div class="container">
                <div class="row img-rounded">
    <hr><small>
    <div class="container">
        <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <p>&copy; 2018 GLINK LLC., &amp; Ennovation LLC.,</p>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <ul>
            <li><a href="/pageview/p/privacy">Privacy Policy</a></li>
            <li><a href="/pageview/p/terms">Terms of Conditions</a></li>
            <li><a href="/pageview/p/return">Return and Refund Policy</a></li>
            <li><a href="/pageview/p/cookie">Cookie Policy</a></li>
            <li><a href="/pageview/p/eula">EULA</a></li>
            <li><a href="/pageview/p/disclaimer">Disclaimer</a></li>
            </ul>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <ul>
            <li><a href="/pageview/p/product">Product</a></li>
            <li><a href="/pageview/p/cloud">Cloud</a></li>
            <li><a href="/pageview/p/mobile">Mobile</a></li>
            <li><a href="/pageview/p/partner">Partners</a></li>
            <li><a href="/pageview/p/document">Document</a></li>
            </ul>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <ul>
            <li><a href="/pageview/p/contact">Contact</a></li>
            <li><a href="/pageview/p/aboutus">About Us</a></li>
            <li><a href="/pageview/p/release">Release</a></li>
            </ul>
        </div>
        </div>
    </div>
</div>
            </div>
        </div>
        </footer>
    





    
    <script src="/static/appbuilder/js/bootstrap.min.js"></script>
    <script src="/static/appbuilder/datepicker/bootstrap-datepicker.js"></script>
    <script src="/static/appbuilder/select2/select2.js"></script>
    <script src="/static/appbuilder/js/ab.js"></script>

    <!--<script src="/static/js/your_js_file.js"></script>-->

<script type="text/javascript">
  //var map = new BMap.Map("allmap");
  var map = new BMap.Map("map_canvas")
  map.centerAndZoom(new BMap.Point(121.48,31.22), 11);  
  //Beijing for (116.404, 39.915), 11
  //Shanghai for (121.48 31.22), 11
  map.addControl(new BMap.MapTypeControl({
    mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));   
  map.addControl(new BMap.NavigationControl());
  map.addControl(new BMap.ScaleControl());
  map.addControl(new BMap.OverviewMapControl()); 
  map.setCurrentCity("上海");
  // 设置地图显示的城市 此项是必须设置的
  map.enableScrollWheelZoom(true);     
  //开启鼠标滚轮缩放
</script>
  </body>
</html>

template中或许有bug，但主要原因还是两者CSS有些冲突。在Firefox中查看到BT3框架中，#map_canvas会因为baidu_map_js而添加内联CSS

map_canvas{

overflow: hidden;
position: relative;
z-index: 0;
background-color: rgb(243, 241, 236);
color: rgb(0, 0, 0);
text-align: left;
}

其中overflow/position似乎有一定作用。但是依然不知道如何让百度地图随着父tag的大小和位置进行调整。希望有朋友指点一二。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

笙痞 2022-09-13 14:56:58

在地图div中添加固定高度

height:300px;

既可以显示，但是无法自动调整。

回复
~没有更多了~

关于作者

紫轩蝶泪

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

花开柳相依

文章 0 评论 0

zyhello

文章 0 评论 0

故友

文章 0 评论 0

对风讲故事

文章 0 评论 0

Oo萌小芽oO

文章 0 评论 0

梦明

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文