javaweb实现在百度地图上的轨迹回放功能，action传入大量的参数到JSP的JavaScript中，实现绘制轨迹功能

最新推荐文章于 2024-05-24 17:54:15 发布

buqulinghun

最新推荐文章于 2024-05-24 17:54:15 发布

阅读量4.2k

点赞数 5

分类专栏： javaweb 文章标签：数据库百度api 轨迹回放 struts javaweb

本文链接：https://blog.csdn.net/buqulinghun/article/details/50209461

版权

javaweb 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

面对这样一个需求，从数据库中动态的取出符合条件的经纬度，放在list中，通过百度api,绘制绘制轨迹。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填密匙"></script>
	 <script type="text/javascript" src="GeoUtils.js"></script>
	<style type="text/css">
		body, html{width: 100%;height: 60%;margin:0;font-family:"微软雅黑";}
		#allmap {height:400px; width: 100%;}
		#control{width:100%;}
	</style>
	    
    <script type="text/javascript" src="GeoUtils.js"></script>
	<title>设置线、面可编辑</title>
</head>
<body>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<div id="allmap"></div>
	<div id="control">
	count<s:property value="count" />
		<button onclick = "polyline.enableEditing();polygon.enableEditing();">开启线、面编辑功能</button>
		<button onclick = "polyline.disableEditing();polygon.disableEditing();">关闭线、面编辑功能</button>
	</div>
</body>
</html>
<s:iterator value="monitorMsgList" var="c">
</s:iterator>
<script type="text/javascript">
	// 百度地图API功能
	
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(106.613922,29.53832), 15);
	map.enableScrollWheelZoom();
 
   var pp = new Array();
<s:iterator value="monitorMsgDraw" var="c">
    pp.push(new BMap.Point(<s:property value="#c.longitude" />,<s:property value="#c.latitude" />)); 
    var marker = new BMap.Marker(new BMap.Point(<s:property value="#c.longitude" />,<s:property value="#c.latitude" />));
   
    map.addOverlay(marker);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);   
    
    var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "轨迹回放功能详情："  // 信息窗口标题	  
	} 
  
  /*
	var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "轨迹回放功能详情："  // 信息窗口标题	  
	}
	*/
		
	marker.addEventListener("click", function(){          
	map.openInfoWindow(new BMap.InfoWindow("时间：<s:property value="#c.time" />", opts),new BMap.Point(<s:property value="#c.longitude" />,<s:property value="#c.latitude" />)); //开启信息窗口
	});  
</s:iterator>

    map.centerAndZoom(pp[pp.length-1], 11);
	map.enableScrollWheelZoom();


	var polyline = new BMap.Polyline(
		pp, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});  //创建折线
	map.addOverlay(polyline);   //增加折线
	
//	addArrow(polyline,0.5,Math.PI/7); //箭头  效果欠佳

        var ppoint = new BMap.Point(106.613087,29.540485);

         var result=BMapLib.GeoUtils.isPointInPolygon(ppoint, polygon);
    
         alert("数字图书馆是否在多边形范围内："+result);

         var ppoint1 = new BMap.Point(106.614986,29.539876);
        
        var result1=BMapLib.GeoUtils.isPointInPolygon(ppoint1, polygon);

        alert("乒乓球馆是否在多边形范围内："+result1);

         var distance =map.getDistance(ppoint, ppoint1);
      
         alert("The Distance is"+distance+"米"); 
         
         
         
         function addArrow(polyline,length,angleValue){ //绘制箭头的函数  
				var linePoint=polyline.getPath();//线的坐标串  
				var arrowCount=linePoint.length;  
				for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头  
				var pixelStart=map.pointToPixel(linePoint[i-1]);  
				var pixelEnd=map.pointToPixel(linePoint[i]);  
				var angle=angleValue;//箭头和主线的夹角  
				var r=length; // r/Math.sin(angle)代表箭头长度  
				var delta=0; //主线斜率，垂直时无斜率  
				var param=0; //代码简洁考虑  
				var pixelTemX,pixelTemY;//临时点坐标  
				var pixelX,pixelY,pixelX1,pixelY1;//箭头两个点  
				if(pixelEnd.x-pixelStart.x==0){ //斜率不存在是时  
				    pixelTemX=pixelEnd.x;  
				    if(pixelEnd.y>pixelStart.y)  
				    {  
				    pixelTemY=pixelEnd.y-r;  
				    }  
				    else  
				    {  
				    pixelTemY=pixelEnd.y+r;  
				    }     
				    //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法  
				    pixelX=pixelTemX-r*Math.tan(angle);   
				    pixelX1=pixelTemX+r*Math.tan(angle);  
				    pixelY=pixelY1=pixelTemY;  
				}  
				else  //斜率存在时  
				{  
				    delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);  
				    param=Math.sqrt(delta*delta+1);  
				  
				    if((pixelEnd.x-pixelStart.x)<0) //第二、三象限  
				    {  
				    pixelTemX=pixelEnd.x+ r/param;  
				    pixelTemY=pixelEnd.y+delta*r/param;  
				    }  
				    else//第一、四象限  
				    {  
				    pixelTemX=pixelEnd.x- r/param;  
				    pixelTemY=pixelEnd.y-delta*r/param;  
				    }  
				    //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法  
				    pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;  
				    pixelY=pixelTemY-Math.tan(angle)*r/param;  
				  
				    pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;  
				    pixelY1=pixelTemY+Math.tan(angle)*r/param;  
				}  
				  
				var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));  
				var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));  
				var Arrow = new BMap.Polyline([  
				    pointArrow,  
				 linePoint[i],  
				    pointArrow1  
				], {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5});  
				map.addOverlay(Arrow);  
				}  
         }  
        
</script>

实现的效果如图：

有兴趣的同行可以评论交流，批评指正！

工程中百度地图API的Demo：http://download.csdn.net/download/buqulinghun/9216291

buqulinghun

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
7
评论
javaweb实现在百度地图上的轨迹回放功能，action传入大量的参数到JSP的JavaScript中，实现绘制轨迹功能

面对这样一个需求，从数据库中动态的取出符合条件的经纬度，放在list中，通过百度api,绘制绘制轨迹。<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+
复制链接

扫一扫