百度地图API之地图加载方式(同步、异步)

关注

原创最新推荐文章于 2026-06-07 12:56:23 发布 2.1w 阅读 AI 写同款· GEO 优化 ›

百度地图的异步加载方法 异步加载目的是在一些场景下，提升网页的渲染性能。普通同步加载代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial- 阅读详情

同步加载方式:
<%@page import="com.util.json.JSONArray"%>
<%@page import="com.util.json.JSONObject"%>
<%@page import="com.bean.CheckAttenceBean"%>
<%@page import="java.util.List"%>
<%@page import="com.service.impl.CheckAttenceService"%>
<%@page import="com.service.ICheckAttenceService"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
ICheckAttenceService checkAttenceService=new CheckAttenceService();
String beginDate="2012-12-12 00:00:00";
String endDate="2012-12-12 23:59:59";
JSONArray jsonArray = new JSONArray();
List<CheckAttenceBean> checkBeanList=checkAttenceService.queryCheckEmps(beginDate, endDate);
for(CheckAttenceBean chBean:checkBeanList){
JSONObject jObect = new JSONObject();
jObect.put("empLng", chBean.getCheckAttLng());// 经纬度
jObect.put("empLat", chBean.getCheckAttLat());// 经纬度
jsonArray.put(jObect);
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>调度查堪人员</title>
<link type="text/css" rel="stylesheet" href="<%=basePath%>css/common.css"></link>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=3e280f09aae77af4248eb99129b3badc&v=1.3&services=false"></script>
</head>
<body>
<div id="createCaseMap"></div>
<script type="text/javascript">
var empCount=0;//在勤的理赔人员总数
var tempPoints=new Array();//存放理赔人员的信息
var empPoints=new Array();//存放理赔人员的信息

tempPoints=eval('<%=jsonArray.toString()%>');
//alert(tempPoints);
for(var i=0,m=tempPoints.length;i<m;i++){
var obj=tempPoints[i];
empPoints[i]=obj.empLng+","+obj.empLat;
//alert(obj.empLng+"---"+obj.empLat);
}
//alert(empPoints.length);
var map=new BMap.Map("createCaseMap");
var point=new BMap.Point(106.540983, 29.560692);//初始化点坐标
map.centerAndZoom(point, 15);   //初始化地图，设置中心点坐标和地图级别   


var points =[];//存放标注查堪人员的对象
//alert("start:"+empPoints.length);
for(var i=0,k=empPoints.length;i<k;i++){
var onePoint=empPoints[i];
if(onePoint.indexOf(",")>-1){
var lng=onePoint.split(",")[0];
var lat=onePoint.split(",")[1];
points[i]=new BMap.Point(lng, lat);//动态的把所有的在勤理赔人员经纬度设置在points中 
}
} 

//自定义覆盖物
var myIcon =new BMap.Icon("<%=basePath%>/images/map/redflag.png", new BMap.Size(100, 70),{//小车图片
   offset: new BMap.Size(0, -5),    //相当于CSS精灵
   imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了使图片底部中心对准坐标点。
 });

//alert("addOverlay:"+points.length);
for(var j=0,m=points.length;j<m;j++){
//如果使用map.addOverlay添加大量数据时,会使浏览器变慢
map.addOverlay(new BMap.Marker(points[j],{icon:myIcon}));
}


map.setViewport(points);         //调整地图的最佳视野为显示标注数组point

map.addEventListener('click',function(e){
alert(e.point.lng+","+e.point.lat);
});

</script>
</body>
</html>

在上面的同步加载方式中,使用jquery的ajax同步加载可以实现上面的代码

ICheckAttenceService checkAttenceService=new CheckAttenceService();
String beginDate="2012-12-12 00:00:00";
String endDate="2012-12-12 23:59:59";
JSONArray jsonArray = new JSONArray();
List<CheckAttenceBean> checkBeanList=checkAttenceService.queryCheckEmps(beginDate, endDate);
for(CheckAttenceBean chBean:checkBeanList){
JSONObject jObect = new JSONObject();
jObect.put("empLng", chBean.getCheckAttLng());// 经纬度
jObect.put("empLat", chBean.getCheckAttLat());// 经纬度
jsonArray.put(jObect);
}

使用jqueyr的ajax方式如下:

function ajaxLoadRequestTask(){
	var addPointsArray="";
	$.ajax({
		type:'post',
		url:'task_getRequestTask.action',
		dataType:'json',
		async:false,//同步加载数据
		cache:false,
		success:function(json){
			addPointsArray=json["sendData"];
			/*for(var i=0;i<jsonArray.length;i++){
				var oneJson=jsonArray[i];
				alert(oneJson["emplId"]);
			}*/
		},
		error:function(json){
			$.messager.alert('提示','加载流转任务的数据失败!'); 
		}
		
	});
	return addPointsArray;
}

如果ajax的同步加载(async:false)不使用,采用默认的加载是异步,即async:true,这样加载出的数据不能赋值给一个js数组变量,使用同步加载方式就可以,是我在网上搜了很久,才找到了问题所在.其实说起ajax的同步与异常加载数据,一看就明白,但用起来不一定真的明白使用场景.

此处让我明白了同步与异步使用的不同场景.

异步加载方式:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>调度查堪人员</title>
<link type="text/css" rel="stylesheet" href="<%=basePath%>css/common.css"></link>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.js"></script>
</head>
<body>
<div id="createCaseMap"></div>
<script type="text/javascript">
var empCount=0;//在勤的理赔人员总数
var empPoints=new Array();//存放理赔人员的信息

/**
*获取所有的在勤的理赔人员
*/
function getEmployeePostion(){
//alert("getEmployeePostion");
var empPointArray=new Array();
$.ajax({
type:'post',
url:'./checkatt_getCheckAttList.action',
dataType:'json',
success:function(data){
for(var i=0;i<data.length;i++){
var obj=data[i];
empPointArray[i]=obj.empLng+","+obj.empLat;
//alert(obj.empLng+"---"+obj.empLat);
}
},
error:function(data){
alert('error!');
}
});

return empPointArray;
}



function loadScript(){
empPoints=getEmployeePostion();//初始化所有的在勤人员
//alert("init emp:"+empPoints.length);
var scriptDom=document.createElement("script");
scriptDom.src="http://api.map.baidu.com/api?key=3e280f09aae77af4248eb99129b3badc&v=1.3&services=false&callback=initialize";
document.body.appendChild(scriptDom);

}

/**
*初始百度地图
*/
function initialize(){
var map=new BMap.Map("createCaseMap");
var point=new BMap.Point(106.540983, 29.560692);//初始化点坐标
map.centerAndZoom(point, 15);   //初始化地图，设置中心点坐标和地图级别   
empCount=empPoints.length;//设置所有 的理赔人员
var points =[];//存放标注查堪人员的对象
//alert(empCount);
for(var i=0,k=empPoints.length;i<k;i++){
var onePoint=empPoints[i];
//alert("for-->"+onePoint);
if(onePoint.indexOf(",")>-1){
var lng=onePoint.split(",")[0];
var lat=onePoint.split(",")[1];
points[i]=new BMap.Point(lng, lat);//动态的把所有的在勤理赔人员经纬度设置在points中
}
} 


//自定义覆盖物
var myIcon =new BMap.Icon("<%=basePath%>/images/map/redflag.png", new BMap.Size(100, 70),{//小车图片
   offset: new BMap.Size(0, -5),    //相当于CSS精灵
   imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了使图片底部中心对准坐标点。
 });


for(var m=0;m<empCount;m++){
//如果使用map.addOverlay添加大量数据时,会使浏览器变慢
map.addOverlay(new BMap.Marker(points[m],{icon:myIcon}));
}

map.setViewport(points);         //调整地图的最佳视野为显示标注数组point

map.addEventListener('click',function(e){
//1、TODO 处理经纬度相同的人员在地图上的显示问题
//不能通过经纬度来查询出员工的个人信息、任务量
alert(e.point.lng+","+e.point.lat);
});
//alert("map初始化完成");
}


window.onload=loadScript;
</script>
</body>
</html>

在上面采用异步加载方式时,在FF浏览器下加载N次地图上的标注点都没问题,但在IE6、7、8、Chrome下只有第一次加载标注点的坐标可以,第二次后就不能了,不知为什么,麻烦知道是怎么回事的兄弟给我说下,目前我在项目中采用同步加载方式.

上面红色字体就是解决我异步加载数据时出现的问题.

收录于