从数据库中取出经纬度在百度地图上画轨迹（一条线的那种）。

最新推荐文章于 2021-06-11 11:23:26 发布

GZM-瘦瘦

最新推荐文章于 2021-06-11 11:23:26 发布

阅读量4.5k

点赞数 7

文章标签： web 百度地图轨迹

本文链接：https://blog.csdn.net/weixin_39443406/article/details/90347355

版权

通过我在博客上找寻一直没有一个完整的从数据库中取出来然后再在百度地图上画轨迹的文章。那我就在毕设快要做完的时候写一下吧。
数据库可以是mysql，Oracle。我用的连接池，不过连接方法都一样。
先在数据库里往外取出数据。
取数据之前先定义实体类

public class LanLat {
	private float longitude;
	private float latitude;
	public float getLongitude() {
		return longitude;
	}
	public void setLongitude(float longitude) {
		this.longitude = longitude;
	}
	public float getLatitude() {
		return latitude;
	}
	public void setLatitude(float latitude) {
		this.latitude = latitude;
	}
	@Override
	public String toString() {
		return "LanLat [longitude=" + longitude + ", latitude=" + latitude + ", getLongitude()=" + getLongitude()
				+ ", getLatitude()=" + getLatitude() + ", getClass()=" + getClass() + ", hashCode()=" + hashCode()
				+ ", toString()=" + super.toString() + "]";
	}
	

}

然后就可以用sql语句取数据了，这里用了改写了一个query取数据的工具，是我在网上找的一个视频老师讲的，我觉得用着简单。意思是就可以直接取出来放在list里面，这个是dao层

	public List<LanLat> findguiji(){
		try {
			String string="select LONGITUDE,LATITUDE from DATA ";
			return qr.query(string, new BeanListHandler<LanLat>(LanLat.class));
		} catch (SQLException e) {
			throw new RuntimeException(e);
		}
	}

然后服务层调用dao层，很简单；

public List<LanLat> findguiji(){
		return dataDao.findguiji();
	}

然后servlet层调用服务层，把list传过去，下面两句是把list转换成json型的，setAttribute就是把这个后面转好的数据给前面这个叫做data，传给前端。然后return就是转到这个页面的。（我同学都说我写的代码野，看不太懂）

public String guiji(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
		List<LanLat> list=carService.findguiji();
		JSONArray Js = JSONArray.fromObject(list);
        request.setAttribute("data",Js);
		return "f:/adminjsps/admin/car/lishi.jsp";
	}

前端是我网上粘贴的，我不知道出处。JSONArray这个必须要有，不然传不过来。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="net.sf.json.JSONArray" %>
<%@ page import="net.sf.json.JSONObject" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
JSONArray jsonArray = (JSONArray)request.getAttribute("data");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'lishi.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="skin/default/datepicker.css"/>
	<style type="text/css">  
 	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
	<script type="text/javascript"  src="/js/jquery.js"></script>
	<script language="javascript"  type="text/javascript" src="/My97DatePicker/WdatePicker.js"></script>
  </head>
  <script type="text/javascript" src="WdatePicker.js"></script>
<body onload="createMap()">
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
	map.enableScrollWheelZoom();
	map.setMapStyle({style:'grassgreen'});
	var json = <%=jsonArray%>;
	var points = [];
		for(var i = 0 ; i <json.length ; i++ ){
			if(i <= json.length -1){
				var polyline = new BMap.Polyline([  
		                                          new BMap.Point(json[i].longitude,json[i].latitude),//起始点的经纬度  
		                                          new BMap.Point(json[i+1].longitude,json[i+1].latitude)//终止点的经纬度  
		                                          ], {strokeColor:"red",//设置颜色   
		                                          strokeWeight:5, //宽度  
		                                          strokeOpacity:0.5});//透明度  
		       map.addOverlay(polyline);  
			}
		}
	//for(var i=0,l=json.length;i<l;i++){
	//	var point = new BMap.Point(json[i].longitude, json[i].latitude);
	//	points[i]=point;
	//}
	//var polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5});   //创建折线
	//map.addOverlay(polyline);   //增加折线
</script>

中间有俩小工具类，一个是query，一个是beasevrlet。想要的可以搜一下itcast。我是跟着这个视频做的。实在找不着也可以跟我要。