模态框加载高德地图时，遇到的加载失败问题

来源：互联网发布：暗黑3猎魔人套装数据编辑：程序博客网时间：2024/05/22 08:08

模态框加载高德地图时，遇到的加载失败问题

本文中将简单说一下[bootstrap][6]框架中模态框在实际应用中遇到的问题及解决方案：

Qusetion

项目中使用[bootstrap][6]模态框，当点击按钮触发模态框后，在模态框中加载一个新页面，要求新页面加载出高德地图

代码如下：

index.html页面代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        <title>主页面</title>        <!--外部文件引入-->        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />        <script src="js/jquery-2.1.1.js"></script>        <script src="js/bootstrap.min.js"></script>    </head>    <body>        <!-- 按钮触发模态框 -->        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>        <!-- 模态框（Modal） -->        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>        <script type="text/javascript">            $(function(){                $('#myModal').load('content.html');            })        </script>    </body></html>

content.html页面代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        <title>内容页面</title>        <!--外部文件引入-->        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>        <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>        <script src="http://webapi.amap.com/maps?v=1.4.1&key=c105406d9f035fb806c671e12dc75db5"></script>        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>        <style>            #container {height:100%}        </style>    </head>    <body>        <!--加载地图-->        <div id="container"></div>        <script type="text/javascript">            var map = new AMap.Map('container', {                resizeEnable: true,                zoom:11,                center: [125.31166, 43.861915]            });            // 实例化点标记            function addMarker(lat,lon) {                var marker = new AMap.Marker({                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",                    position: [lon, lat]                });                marker.setMap(map);            }        </script>    </body></html>

Case

代码运行后，发现地图未加载出来。console控制台未报错，经判断应该是js加载过程中出现问题。进行简单调整后，解决问题。

Answer

将content.html文件中引入的外部文件，放入index.html中进行引入，经实践，解决问题！
代码如下：

index.html页面代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        <title>主页面</title>        <!--外部文件引入-->        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />        <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>        <script src="js/jquery-2.1.1.js"></script>        <script src="js/bootstrap.min.js"></script>        <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>        <script src="http://webapi.amap.com/maps?v=1.4.1&key=c105406d9f035fb806c671e12dc75db5"></script>        <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>    </head>    <body>        <!-- 按钮触发模态框 -->        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>        <!-- 模态框（Modal） -->        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>        <script type="text/javascript">            $(function(){                $('#myModal').load('content.html');            })        </script>    </body></html>

content.html页面代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        <title>内容页面</title>        <style>            #container {height:100%}        </style>    </head>    <body>        <!--加载地图-->        <div id="container"></div>        <script type="text/javascript">            var map = new AMap.Map('container', {                resizeEnable: true,                zoom:11,                center: [125.31166, 43.861915]            });            // 实例化点标记            function addMarker(lat,lon) {                var marker = new AMap.Marker({                    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",                    position: [lon, lat]                });                marker.setMap(map);            }        </script>    </body></html>

Summary

此问题的发生与浏览器的读取机制有关，具体如下：

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
　　1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，
服务器返回html文件；
　　2. 浏览器开始载入html代码，发现head标签内有一个link标签引用外部CSS文件；
　　3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
　　4. 浏览器继续载入html中body部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
　　5. 浏览器在代码中发现一个img标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
　　6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
　　7. 浏览器发现了一个包含一行Javascript代码的script标签，赶快运行它；
　　8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个div（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
　　9. 终于等到了/html的到来，浏览器泪流满面……
　　10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下link标签的CSS路径；
　　11. 浏览器召集了在座的各位div，span，ul，，li们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请
　　求了新的CSS文件，重新渲染页面。

Quote

本文末尾引用了一部分【浏览器的渲染机制解释】，来自神奇的百度搜索。

阅读全文

0 0