同步和異步概念（由DZW前端框架引起的百度地圖api沒法加載問題總結）

時間 2019-11-13

標籤同步異步概念 dzw 前端框架引起百度地圖 api 沒法加載問題總結简体版

原文原文鏈接

首先概念：javascript

在計算機領域，同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。html

最後採用異步調用，才實現地圖在彈出框的加載。但綁定的事件不起做用，艱難啊，小後端碰到前端難題。。。前端

貼代碼留念下java

<%@ 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及前端我本身都受不了。沒辦法，先後端都要寫，難。先搞定後端吧，前面的有空再搞，畢竟我只是個後端的。後端

將代碼精簡後獲得：api

<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>