面对这样一个需求,从数据库中动态的取出符合条件的经纬度,放在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