百度地图画连线

fatedgar

浏览: 134487 次
性别:
来自: 安徽

最近访客更多访客>>

xiechao75

jason__2013

susie644

hangtangshiyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

海悦

百度地图地图连线坐标连线

附件中的地图连线.rar是简单的连线html例子。

在百度上把几个坐标按数据库中查询出来的时间顺序直线连接起来

<%@ include file="../../jsp/common/getSession.jsp"%>
<%@ include file="../../jsp/common/standAloneJSHeader.jsp" %>

<html>
<head>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="../../script/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"></script>
<script type="text/javascript" src="../../script/json2.js"></script>
<%  	
	String sfzh = Util.NVLL(request.getParameter("sfzh"));
	String selectDate = Util.NVLL(request.getParameter("selectDate"));
	String pp=sfzh+"|"+selectDate;
%>
<script type="text/javascript">
var map;
function initialize() {
  // 百度地图API功能
  map = new BMap.Map("map_canvas");
  map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
  map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
  map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
  map.enableScrollWheelZoom();                            //启用滚轮放大缩小
  map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
  map.centerAndZoom(new BMap.Point(108.953456, 34.275799),15);

  getMarkerArr(map);
}

function getMarkerArr(map) { 
	$.ajax({
		type: 'POST',
		url: '../../../servlet/ajax',
		data: {cmd:"ajax",method:"com.happysys.fatedgar.GetJson.getJsonOfRoute",p:"<%=pp%>"},
		success: function(data){
			if(data=="[]")
				alert("<%=selectDate%>没有数据！");
			showToolAutoDef(map,data);
		}
    	});
}
var markerArray = new Array();
function showToolAutoDef(map,data) {
	var myobj=eval(data);  
	var points = new Array();
	map.centerAndZoom(new BMap.Point(myobj[1].along, myobj[1].alat),13);
	for(var i=0;i<myobj.length;i++){  
	   var lat=myobj[i].alat;
	   var lng=myobj[i].along;
	   var war=myobj[i].war;
	   var bat=myobj[i].bat;
	   var temp=myobj[i].temp;
	   var bdhm=myobj[i].bdhm;
	   var sfzh=myobj[i].sfzh;
	   var humidity=myobj[i].humidity;
	   var scount=myobj[i].scount;
	   var created_date=myobj[i].created_date;
	   //alert(lng+" || "+lat);
	   var point = new BMap.Point(lng,lat);
	   var iconImg = createIcon();
	   if(i==0)
	   	iconImg = createStarIcon();
	   if(i==(myobj.length-1))
	   	iconImg = createEndIcon();
	   if(war!="0")
	   	iconImg = createWarIcon();
	   var marker = new BMap.Marker(point,{icon:iconImg});
	   map.addOverlay(marker);
	   
	   if(i==0){
	   	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	   }
	   (function(){
			var index = i;
			var _iw = createInfoWindow(i,data);
			var _marker = marker;
			
			_marker.addEventListener("click",function(){
			    this.openInfoWindow(_iw);
		    });
		    
		})()
	   points.push(point);
	}  
	//alert("points长度："+points.length);
	drawPolyline(map, points);
}

/**
 * 画线
 * @param bMap
 * @param points
 */
function drawPolyline(bMap, points) {
	if (points==null || points.length<=1) {
		return;
	}
	bMap.addOverlay(new BMap.Polyline(points, {
		strokeColor : "red",
		strokeWeight : 3,
		strokeOpacity : 0.5
	})); // 画线
}

//创建一个Icon
function createIcon(){
	var icon = new BMap.Icon("../../images/user.png", 
        	new BMap.Size(16, 16), {anchor: new BMap.Size(5, 20)});
	return icon;
}
function createWarIcon(){
	var icon = new BMap.Icon("../../images/rss.png", 
        	new BMap.Size(20, 20), {anchor: new BMap.Size(5, 20)});
	return icon;
}
function createStarIcon(){
	var icon = new BMap.Icon("../../images/forward.png", 
        	new BMap.Size(20, 20), {anchor: new BMap.Size(5, 20)});
	return icon;
}
function createEndIcon(){
	var icon = new BMap.Icon("../../images/closed.png", 
        	new BMap.Size(20, 20), {anchor: new BMap.Size(5, 20)});
	return icon;
}
//创建InfoWindow
function createInfoWindow(i,data){
	var myobj=eval(data);  
	var lat=myobj[i].alat;
	   var lng=myobj[i].along;
	   var war=myobj[i].war;
	   var bat=myobj[i].bat;
	   var temp=myobj[i].temp;
	   var bdhm=myobj[i].bdhm;
	   var sfzh=myobj[i].sfzh;
	   var humidity=myobj[i].humidity;
	   var scount=myobj[i].scount;
	   var created_date=myobj[i].created_date;

	   if(war!="0"){
		war="<font color='red'><b>请注意！老人已摔倒！</b></font>";
	   }else{
		war="<font color='green'>正常。</font>";
	   }
	   if(scount=="")
	   	scount=0;
	   
	   var iw = new BMap.InfoWindow("<div class='marker_content'><font size=2>"
		   	   	   	   				+"时&nbsp;&nbsp;&nbsp;&nbsp;间:&nbsp;&nbsp;"+created_date+"<br>"
		   	   	   	   				+"提&nbsp;&nbsp;&nbsp;&nbsp;醒:&nbsp;&nbsp;"+war+"<br>"
		   	   	   	   				+"经&nbsp;纬&nbsp;度:&nbsp;&nbsp;("+lng+","+lat+")<br>"
		   	   	   	   				+"剩余电量:&nbsp;&nbsp;"+bat+"%<br>"
		   	   	   	   				+"湿&nbsp;&nbsp;&nbsp;&nbsp;度:&nbsp;&nbsp;"+temp+"%rh<br>"
		   	   	   	   				+"温&nbsp;&nbsp;&nbsp;&nbsp;度:&nbsp;&nbsp;"+temp+"℃<br>"
		   	   	   	   				+"绑定号码:&nbsp;&nbsp;"+bdhm+"<br>"
		   	   	   	   				+"已行走步数:&nbsp;&nbsp;"+scount+"&nbsp;步<br>"
		   	   	   					+"</font></div>"
					+"<br>");
	 return iw;
}

 function updateAct(){
	getMarkerArr();
 }
    	
 setInterval("updateAct();",300000);   
</script>
</head>
<body onload="initialize()">
<input id="sfzh" name="sfzh" type="hidden" value="<%=sfzh%>" />
 <div id="map_canvas" style="width: 100%; height: 100%;"></div>
  
  
</body>
</html>

下面是service端代码

package com.happysys.fatedgar;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Calendar;

import org.codehaus.jettison.json.JSONArray;
import org.codehaus.jettison.json.JSONObject;

import com.happysys.erp.webapps.util.DBResultSet;
import com.happysys.erp.webapps.util.Util;

public class GetJson {
	public static String getJsonOfRoute(String pp){
		
		StringBuffer sb=new StringBuffer();
		try{
			String pps[]=Util.parseList(pp, "|");
			String sfzh=pps[0];
			String selectDate=pps[1];
			//sfz="61010219910604367X";
			//selectDate="2014-05-10";
			if("".equals(selectDate)){
				Calendar cal=Calendar.getInstance();
				int year = cal.get(Calendar.YEAR);    //获取年
				int month = cal.get(Calendar.MONTH) + 1;   //获取月份，0表示1月份
				int day = cal.get(Calendar.DAY_OF_MONTH);    //获取当前天数
				selectDate=year + "-" + month + "-"+ day;
			}
			DBResultSet rs1 = new  DBResultSet();
			String sql="select id,key1,war,bat,temp,bdhm,sfzh,humidity,scount,alat,along,created_date from stepcount where sfzh='"+sfzh+"' and created_date between to_date('"+selectDate+" 00:00:00','yyyy-mm-dd HH24:MI:SS') and to_date('"+selectDate+" 23:59:59','yyyy-mm-dd HH24:MI:SS') order by created_date desc";
			ResultSet rs = rs1.select(sql, new Object[]{}, 0,0);
			JSONArray jsonarr=new JSONArray();
			while(rs.next()) {
					String id = Util.NVLL(rs.getString(1));//主键
					String key1 = Util.NVLL(rs.getString(2));//KEY
					String war = Util.NVLL(rs.getString(3));//报警状态
					String bat = Util.NVLL(rs.getString(4));//电池电量
					String temp = Util.NVLL(rs.getString(5));//产品温度
					String bdhm = Util.NVLL(rs.getString(6));//绑定号码
					String sfzh1 = Util.NVLL(rs.getString(7));//身份证号码
					String humidity = Util.NVLL(rs.getString(8));//湿度
					String scount = Util.NVLL(rs.getString(9));//步数
					String alat = Util.NVLL(rs.getString(10));//纬度坐标(默认)
					String along = Util.NVLL(rs.getString(11));//经度坐标(默认)
					//String coord=CoordChange.CChange(along, alat,"0","4");
					String coord=CoordChange.Gps2Baidu(along, alat);//gps坐标转换百度
					String coords[]=Util.parseList(coord, "|");
					along=coords[0];
					alat=coords[1];
					String created_date = Util.NVLL(rs.getString(12));//时间
					try{
						JSONObject json=new JSONObject();
						json.put("id", id);
						json.put("key1", key1);
						json.put("war", war);
						json.put("bat", bat);
						json.put("temp", temp);
						json.put("bdhm", bdhm);
						json.put("sfzh", sfzh1);
						json.put("humidity", humidity);
						json.put("scount", scount);
						json.put("alat", alat);
						json.put("along", along);
						json.put("created_date", created_date);
						jsonarr.put(json);				
					}catch(Exception e1){
						e1.printStackTrace();
					}
			}
			sb.append(jsonarr);
			rs.close();
			rs1.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return sb.toString();
	}
}

备注：

其中一些方法就没有贴出来了。大致的处理结果大家都能猜到，方法中的：

Util.parseList(pp, "|");这个处理的结果是已“|”分隔String。

String coord=CoordChange.Gps2Baidu(along, alat);这个方法可以查阅：

经纬度转换（gps|百度|google）http://fatedgar.iteye.com/admin/blogs/2068259

地图连线.rar (2 KB)
下载次数: 91

分享到：

如何制作PDF套打模板 | 经纬度转换（gps|百度|google）

2014-05-19 15:31
浏览 8597
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

百度地图画连线

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

百度地图画连线

评论

发表评论

相关推荐

如何制作PDF套打模板

经纬度转换（gps|百度|google）

百度地图画多边形区域

https设置

virtualhost配置(windows环境)

用AJAX写的聊天室（和淘宝下的阿里巴巴很像的工具条）

根据RTF模版输出doc文件(草稿)

最近访客更多访客>>