同步和异步概念（由DZW前端框架引发的百度地图api无法加载问题总结）

首先概念：

在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

 

最后采用异步调用，才实现地图在弹出框的加载。但绑定的事件不起作用，艰难啊，小后端碰到前端难题。。。

贴代码留念下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/include.inc.jsp"%>
<!--  -->
<script type="text/javascript">
    function loadMapJs() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=XsM2qRL2DI8AXpGpBzzsfzAnzx1upYPT&callback=init";//中间的访问码ak改成公司的        
        document.body.appendChild(script);
        }
    function init() {
        initMap();//创建和初始化地图
        createSearch();
        createAutocomlete();
        $("#s_p_search_btn").click(function () {
            searchPlace($("#searchplace").val());
        });
    }
    $(document).ready(function () {
        loadMapJs();//异步加载地图
        //console.log("123");
        //createAutocomlete();
        //setCity();
    });


     function initMap(){
         createMap();//创建地图
         setMapEvent();//设置地图事件
     }
     //创建地图函数：
     function createMap(){
         var map = new BMap.Map("BaiduDitu");//在百度地图容器中创建一个地图
         map.centerAndZoom('广州',11);//设定地图的中心点和坐标并将地图显示在地图容器中
         window.map = map;//将map变量存储在全局
     }
     //地图事件设置函数：
     function setMapEvent(){
         map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
         map.enableScrollWheelZoom();//启用地图滚轮放大缩小
         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
         map.enableKeyboard();//启用键盘上下左右键移动地图
     }
     /* $(function(){
         initMap();//创建和初始化地图
         createSearch();
         createAutocomlete();
         $("#s_p_search_btn").click(function () {
             searchPlace($("#searchplace").val());
         });
     }); */
     function createSearch() {
         var map = window.map;
         var local = new BMap.LocalSearch(map,
             {
                 renderOptions: { map: map, panel: "searchlist" }
             });
         window.local = local;
     }
     //搜索
     function searchPlace(value) {
         window.local.search(value);
     }
     function createAutocomlete() {
         var map = window.map;
         console.log("addr:");
         var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
             {
                 "input": "searchplace",
                 "location": map
             });
         ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
             var _value = e.item.value;
             var addr =_value.business+ _value.province + _value.city + _value.district + _value.street + _value.streetNumber ;
             searchPlace(addr);
             //$("#searchplace").val(addr);
            
         });
         
     }
     //地址解析并带回
     function setReturnPlace(){
        var locationName=$('#addr_del').val();
        if(locationName!=null){
            $('#addr_del').val('地址解析中...');
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(locationName, function(point){                
                if (point) {
                    console.log("经度:"+point.lng);
                    console.log("纬度:"+point.lat);
                    if (confirm("确定是这个地址吗？\r "+locationName+"\r 经度："+point.lng+"\r 纬度："+point.lat)) {
                        window.location.href="javascript:$.bringBack({place:'"+locationName+"',lng:'"+point.lng+"',lat:'"+point.lat+"'})";
                         $('#addr_del').val('');
                    } else{
                         window.location.href ="javascript:void(0);"
                         $('#addr_del').val('');
                    }
                }  else{
                    console.log("地图经纬度解析失败");    
                    $('#addr_del').val("地图经纬度解析失败！请查找后输入准确的地址。");
                }                
            },"");                
        }else{
            //提示为空
            $('#addr_del').val("您的输入为空！");
            window.location.href ="javascript:void(0);"
        }
           
        return false;
     }
 </script>
<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west'" style="width:400px;">
        <div style="margin-bottom:10px;">
            <input id="addr_del" style="width: 380px;"  placeholder="请输入百度地图上的准确地址" />
            <a id="set_place" href="javascript:void(0);" class="easyui-linkbutton" style="width:63px;" data-options="iconCls:'icon-add'" onclick="setReturnPlace()">确认</a>
            <label for="map_search">地图搜索:</label>
            <input id="searchplace" name="map_search" style="width: 380px;" class="easyui-textbox-simple" placeholder="输入搜索关键字" />
            <a id="s_p_search_btn" href="javascript:void(0);" class="easyui-linkbutton" style="width: 63px;"  data-options="iconCls:'icon-search'" >搜索</a>
        </div>
        <div id="searchlist" style="width: 350px; height: 360px; margin-right:10px; float:left;"></div>
    </div>
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
        <div style="width:520px;height:540px;border:none; float:left;" id="BaiduDitu"></div>
        <div style="clear:both;"></div>
    </div>
</div>


    

虽然功能勉强实现了，但这样子的ui及前端我自己都受不了。没办法，前后端都要写，难。先搞定后端吧，前面的有空再搞，毕竟我只是个后端的。

 将代码精简后得到：

<script type="text/javascript">
    
    $(document).ready(function () {
        var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=XsM2qRL2DI8AXpGpBzzsfzAnzx1upYPT&callback=init";//中间的访问码ak改成公司的        
            document.body.appendChild(script);
    });    
    function init() {
        var map = new BMap.Map("BaiduDitu");//在百度地图容器中创建一个地图
         map.centerAndZoom('广州',11);//设定地图的中心点和坐标并将地图显示在地图容器中
         window.map = map;//将map变量存储在全局
       
    }     
    </script>
</head>
<body>
    <div id="BaiduDitu" style="width:100px;height:100px;"></div>
</body>
</html>

 

缩减后发现更清晰了，利用createElement() 方法可创建元素节点。此方法可返回一个 Element 对象。动态添加。

既然存在  document 对象，就可以把变量存放到document中使其成为全局变量。

 

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。