首先概念：
在计算机领域，同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
最后采用异步调用，才实现地图在弹出框的加载。但绑定的事件不起作用，艰难啊，小后端碰到前端难题。。。
贴代码留念下
<%@ 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("确定是这个地址吗？
"+locationName+"
经度："+point.lng+"
纬度："+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="400px;">
<div style="margin-bottom:10px;">
<input id="addr_del" style=" 380px;" placeholder="请输入百度地图上的准确地址" />
<a id="set_place" href="javascript:void(0);" class="easyui-linkbutton" style="63px;" data-options="iconCls:'icon-add'" onclick="setReturnPlace()">确认</a>
<label for="map_search">地图搜索:</label>
<input id="searchplace" name="map_search" style=" 380px;" class="easyui-textbox-simple" placeholder="输入搜索关键字" />
<a id="s_p_search_btn" href="javascript:void(0);" class="easyui-linkbutton" style=" 63px;" data-options="iconCls:'icon-search'" >搜索</a>
</div>
<div id="searchlist" style=" 350px; height: 360px; margin-right:10px; float:left;"></div>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<div style="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="100px;height:100px;"></div> </body> </html>
缩减后发现更清晰了，利用createElement() 方法可创建元素节点。此方法可返回一个 Element 对象。动态添加。
既然存在 document 对象，就可以把变量存放到document中使其成为全局变量。
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。