39,117
社区成员
发帖
与我相关
我的任务
分享bootstrap modal 和百度地图整合
先上正常的百度地图源码：
和bootstrap 的modal整合后，不正常的代码：
代码都上了，试试都知道是啥问题了。多点击几次。
<!DOCTYPE html>
<html>
<head>
<title>百度地图实例</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5dEsfUlwMV0GdHlxoqgvlxE0"></script>
</head>
<body>
<h2>百度地图</h2>
<!-- 按钮触发模态框 -->
<input type="button" value="showMap" id="createMap"/>
<input type="button" value="hidenMap" id="hidenMap"/>
<!-- 模态框（Modal） -->
<div id="maps" style="width:100%;height:500px;">
</div>
<script type="text/javascript">
$(function(){
$("#hidenMap").click(function(){
$("#maps").hide();
});
$("#createMap").click(function(){
$("#maps").show();
var map = new BMap.Map("maps");
var myCity = new BMap.LocalCity();
myCity.get(function(res){
map.centerAndZoom(res.center,res.level);
});
});
});
</script>
</body>
</html>
和bootstrap 的modal整合后，不正常的代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5dEsfUlwMV0GdHlxoqgvlxE0"></script>
</head>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal" id="createMap">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body" id="maps" style="height:400px;">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(function(){
$("#createMap").click(function(){
var map = new BMap.Map("maps");
var myCity = new BMap.LocalCity();
myCity.get(function(res){
map.centerAndZoom(res.center,res.level);
});
});
});
</script>
</body>
</html>
代码都上了，试试都知道是啥问题了。多点击几次。
...全文
请发表友善的回复…
发表回复
蓬莱东路走九遭 2016-04-13
- 打赏
- 举报
跟楼主差不多的情况，也用了延时的方法试了下，电脑上可以，但手机上一直是只能加载一部分地图（手动移动地图，托几下就没地图显示了），用的ios 5s
也测试了下楼主贴的代码页面，放到iis，手机访问是一个情况，哎
请叫我头头哥 2016-03-21
- 打赏
- 举报
自己动手，丰衣足食 - -
大李SVIP 2015-06-13
- 打赏
- 举报
问题自己已经解决了。
经过多次分析，问题是当点击按钮的时候，地图没有及时创建出来。所以出现地图加载不全。
具体解决 办法，然地图延时加载。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5dEsfUlwMV0GdHlxoqgvlxE0"></script>
</head>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal" id="createMap">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body" id="maps" style="height:400px;">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
$(function(){
$("#createMap").click(function(){
setTimeout(function() {//添加延时加载。解决问题
var map = new BMap.Map("maps");
var myCity = new BMap.LocalCity();
myCity.get(function(res){
map.centerAndZoom(res.center,res.level);
});
},300);
});
});
</script>
</body>
</html>
