极客观点
项目管理
HarmonyOS
尝试在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">×</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("上海");
// 设置地图显示的城市 此项是必须设置的
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的大小和位置进行调整。希望有朋友指点一二。
在地图div中添加固定高度
height:300px;既可以显示，但是无法自动调整。