嘗試在BT3中集成百度地圖。但發(fā)現(xiàn)百度諸多方面與BT3的CSS有沖突，一旦將其放置到BT3的某個容器中，立刻不顯示了。也參考了其他朋友們關(guān)于此類現(xiàn)象的解決方案，貌似沒有幫助。
網(wǎng)址：
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("上海");
// 設(shè)置地圖顯示的城市 此項是必須設(shè)置的
map.enableScrollWheelZoom(true);
//開啟鼠標(biāo)滾輪縮放
</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">×</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>© 2018 GLINK LLC., & 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("上海");
// 設(shè)置地圖顯示的城市 此項是必須設(shè)置的
map.enableScrollWheelZoom(true);
//開啟鼠標(biāo)滾輪縮放
</script>
</body>
</html>template中或許有bug，但主要原因還是兩者CSS有些沖突。在Firefox中查看到BT3框架中，#map_canvas會因為baidu_map_js而添加內(nèi)聯(lián)CSS
overflow: hidden;
position: relative;
z-index: 0;
background-color: rgb(243, 241, 236);
color: rgb(0, 0, 0);
text-align: left;
}
其中overflow/position似乎有一定作用。但是依然不知道如何讓百度地圖隨著父tag的大小和位置進(jìn)行調(diào)整。希望有朋友指點一二。
在地圖div中添加固定高度
height:300px;
既可以顯示，但是無法自動調(diào)整。
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán)，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多