Ajax json xmlhttp 关于百度地图学习

最新推荐文章于 2018-11-22 11:10:00 发布

原创最新推荐文章于 2018-11-22 11:10:00 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #ajax #百度地图 #xmlhttprequest #servlet

web 专栏收录该内容

2 篇文章

订阅专栏

在老师的指导下，作者开始学习百度地图API，并利用Ajax、JSON、XMLHttpRequest等技术进行前后台数据交互。文章详细介绍了如何通过Servlet获取并处理数据，以及使用JSP进行数据展示。重点在于数据的高效传输与地图数据的可视化呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

暑假开始在老师指点下，开始学习百度地图api的东西，才发现百度有那么好的东西。

期间任务一直在拖，，，，直到今天，完成了最开始的小目的。

为了使在前后台传递经纬度的数据用了Ajax json xmlhttp的东西，全新的东西，学了一点点。

Servlet部分

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		gpsbeandao bean = new gpsbeandao();
		List<gpsbean> gpsbeans = bean.getStoreList();  //数据获得，存到list的方法
	
		JSONArray json = new JSONArray();  
        
		json.addAll(gpsbeans);
		
         resp.getWriter().print(json);

	}

jsp部分

var getData = function(url) {
	
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else {
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp.onreadystatechange = drawLine;
	xmlhttp.open("GET",url,true);    //map为url
	xmlhttp.send();
}

var drawLine = function() { 	 
	var pointArr = [];
	if(xmlhttp.readyState==4 && xmlhttp.status==200) {
		//将json字符串转换成json对象

		var json=eval('('+xmlhttp.responseText+')');   //<span style="font-family: Arial, Helvetica, sans-serif;">xmlhttp.responseText</span>获得的是String型
		for(var i = 0;i < json.length;i++) {

	<span style="white-space:pre">	</span>   var bd=wgs2bd( json[i].gpslatitude,json[i].gpslongitude);   //wgs2bd为把gps的坐标换做百度坐标函数（不是官方的标准函数）
	       <span style="white-space:pre">	</span>  pointArr.push(new BMap.Point(bd.lng,bd.lat));
			
		}

		
		var polyline = new BMap.Polyline(pointArr, {strokeColor:"blue", strokeWeight:1, strokeOpacity:0.7});
		map.addOverlay(polyline);
		
		//设置地图的视野包含所有的轨迹点
		//map.setViewport(pointArr);
	}
	 
}

数据传送部分搞了好多天，在一研究生帮忙下懂了这一点点知识