js 百度地图第二次加载显示不全问题解决方案
2017-08-24 10:46
1156 查看
使用div load方式后如果直接映入百度地图的js,发现第二次加载时显示不全,使用异步加载地图方式可以解决问题。
如下:
<!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=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<title>异步加载地图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//百度地图API功能
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=init";
document.body.appendChild(script);
}
function init() {
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
}
window.onload = loadJScript; //异步加载地图
</script>
百度地图api示例:
http://developer.baidu.com/map/jsdemo.htm
如下:
<!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=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<title>异步加载地图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
//百度地图API功能
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=init";
document.body.appendChild(script);
}
function init() {
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point,15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
}
window.onload = loadJScript; //异步加载地图
</script>
百度地图api示例:
http://developer.baidu.com/map/jsdemo.htm
相关文章推荐
- 解决three.js加载外部obj文件在chrome浏览器中无法显示的问题
- easyUI页面加载完成前不显示样式问题解决方案
- Extjs加载百度地图,显示不全的问题
- UEditor 的表格加载正常,第二次却显示不出来,vue.js里面的解决方法
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- IE11浏览器js加载数据不显示问题的解决
- 百度地图 循环加载marker并添加多个信息窗口,解决只显示最后一个窗口信息的问题
- django 解决css,js文件304导致无法加载显示问题
- wkhtmltopdf 将highcharts的页面转为pdf 图表加载不上问题 或者图标显示不全问题解决
- arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
- (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。
- django 解决css,js文件304导致无法加载显示问题
- 解决TSVN的diff显示中文件不全的问题
- IIS安装和无法显示动态网页问题解决方案
- UTF-8编码主页调用JS显示乱码问题解决办法
- 多层动态加载js文件出现的问题终极解决【深海原创】
- fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
- openmeetings在flash player10中,解决加载文档显示不出来的问题
- AJAX tab显示不全及Android ADT不能下载的问题(已解决)
- Delphi下Label中文字体显示不全问题的解决