百度地图测加载的两种 方式 直接加载和异步加载

来源:互联网 发布:linux jar打包命令 编辑:程序博客网 时间:2024/06/15 05:08
转自:http://blog.csdn.net/u014470581/article/details/52780881

1、直接加载

[html] view plain copy
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  5.     <style type="text/css">  
  6.         body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}  
  7.         #l-map{height:300px;width:100%;}  
  8.         #r-result{width:100%; font-size: 14px; line-height: 20px;}  
  9.     </style>  
  10.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Ikd2A16tuZY9jviM4wRNkO2Tu3DT5lwK"></script>  
  11.     <title>本地搜索的数据接口</title>  
  12. </head>  
  13. <body>  
  14.     <div id="l-map"></div>  
  15.     <div id="r-result"></div>  
  16. </body>  
  17. </html>  
  18. <script type="text/javascript">  
  19.     // 百度地图API功能  
  20.     var map = new BMap.Map("l-map");          
  21.     map.centerAndZoom("天津市", 11);  
  22.   
  23.     var options = {  
  24.         onSearchComplete: function(results){  
  25.             // 判断状态是否正确  
  26.             if (local.getStatus() == BMAP_STATUS_SUCCESS){  
  27.                 var s = [];  
  28.                 for (var i = 0; i < results.getCurrentNumPois(); i ++){  
  29.                     s.push(results.getPoi(i).title + ", " + results.getPoi(i).address+","+results.getPoi(i).point.lng+","+ results.getPoi(i).point.lat);  
  30.                 }  
  31.                 document.getElementById("r-result").innerHTML = s.join("<br/>");  
  32.             }  
  33.         }  
  34.     };  
  35.     var local = new BMap.LocalSearch("天津市", options);  
  36.     local.search("消防队");  
  37. </script>  
2.异步加载
[html] view plain copy
  1. <%--  
  2.   Created by IntelliJ IDEA.  
  3.   User: chc  
  4.   Date: 2016/10/10  
  5.   Time: 10:59  
  6.   To change this template use File | Settings | File Templates.  
  7. --%>  
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  9. <html>  
  10. <head>  
  11.   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  12.   <style type="text/css">  
  13.     body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}  
  14.     #l-map{height:300px;width:100%;}  
  15.     #r-result{width:100%; font-size: 14px; line-height: 20px;}  
  16.   </style>  
  17.   
  18.     <script type="text/javascript">  
  19.         function initialize() {  
  20.             // 百度地图API功能  
  21.             var map = new BMap.Map("l-map");  
  22.             map.centerAndZoom("天津市", 11);  
  23.   
  24.             var options = {  
  25.                 onSearchComplete: function(results){  
  26.                     // 判断状态是否正确  
  27.                     if (local.getStatus() == BMAP_STATUS_SUCCESS){  
  28.                         var s = [];  
  29.                         for (var i = 0; i < results.getCurrentNumPois(); i ++){  
  30.                             s.push(results.getPoi(i).title + ", " + results.getPoi(i).address+","+results.getPoi(i).point.lng+","+ results.getPoi(i).point.lat);  
  31.                         }  
  32.                         document.getElementById("r-result").innerHTML = s.join("<br/>");  
  33.                     }  
  34.                 }  
  35.             };  
  36.             var local = new BMap.LocalSearch("天津市", options);  
  37.             local.search("消防队");  
  38.         }  
  39.   
  40.         function loadScript() {  
  41.             var script = document.createElement("script");  
  42.             script.src = "http://api.map.baidu.com/api?v=2.0&ak=Ikd2A16tuZY9jviM4wRNkO2Tu3DT5lwK&callback=initialize";  
  43.             document.body.appendChild(script);  
  44.         }  
  45. $(function(){  
  46.     loadScript();  
  47. })  
  48.   
  49.     </script>  
  50.   
  51.     <title>本地搜索的数据接口</title>  
  52.   
  53. </head>  
  54. <body>  
  55.   <div id="l-map"></div>  
  56.   <div id="r-result"></div>  
  57. </body>  
  58. </html> 
原创粉丝点击