首先概念：
在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
最后采用异步调用，才实现地图在弹出框的加载。但绑定的事件不起作用，艰难啊，小后端碰到前端难题。。。
贴代码留念下
<%@ 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'" οnclick="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 页面中的所有元素进行访问。
