您的位置：首页 > 数据库

JS方式实现百度地图加载数据库中的坐标并实现动态刷新

2014-12-09 12:08 916 查看

整个Demo要实现的目标就是在百度地图上首先加载数据库中的坐标数据，加载完毕1分钟后，开始每隔10秒扫描一下数据库，如果有新的坐标点，就动态添加到地图上。这个功能不难，但是百度了很久也没找到个合适的，没办法，只能自己写了。因为本人JS水平非常有限，做前台的时候只用过ExtJS3，对现在比较流行的JQuery什么的没有研究，所以暂时先用Ext3.0.0来实现，虽然办法比较笨，毕竟也算是把功能实现了，希望有人能给个更好的解决方案。

下面开始上代码：index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">



<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak='你的ak，不用加单引号'"></script>

<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>

<title>百度地图测试</title>

<style type="text/css">
body, html, #testMap{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<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" type="text/css"
href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-lang-zh_CN.js"></script>

</head>

<body>

<div id="testMap"></div>

</body>

</html>

<script type="text/javascript">

var count = 0;
var map = new BMap.Map("xyMap"); //创建Map实例
map.centerAndZoom(new BMap.Point("初始经度值","初始纬度值"), 17); //初始化地图，设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.NavigationControl()); //添加地图缩放控件
map.addControl(new BMap.ScaleControl()); //添加比例尺控件
map.setCurrentCity("城市名"); //设置地图显示的城市，这项是必须的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

var gPoints = [];

Ext.Ajax.request({
url : 'coords.do?method=getCoords',
params : {},
success : function(response, options) {

var str = response.responseText;
var jsonObj = eval('('+str+')');
count = jsonObj.coordsList.length;
for(var i = 0; i < jsonObj.coordsList.length; i++){
var lng = Number(jsonObj.coordsList[i].longi);
var lat = Number(jsonObj.coordsList[i].lati);
gPoints[i] = new BMap.Point(lng,lat);
}
alert("gPoints长度："+gPoints.length);
proBPoints(gPoints);
}
});

setTimeout(function(){
Ext.TaskMgr.start({
run : function() {
Ext.Ajax.request({
url : 'coords.do?method=getCoords',
params : {},
success : function(response, options) {

var str = response.responseText;
var jsonObj = eval('('+str+')');
if(jsonObj.coordsList.length > count){
if(count > 0){
for(var m = 0; m < jsonObj.coordsList.length-count; m++){
var lngTemp1 = Number(jsonObj.coordsList[count-1+m].longi);
var latTemp1 = Number(jsonObj.coordsList[count-1+m].lati);
var lngTemp2 = Number(jsonObj.coordsList[count+m].longi);
var latTemp2 = Number(jsonObj.coordsList[count+m].lati);
var pointTemp1 =
a175
new BMap.Point(lngTemp1,latTemp1);
var pointTemp2 = new BMap.Point(lngTemp2,latTemp2);
var markerTemp = new BMap.Marker(pointTemp2);
map.addOverlay(markerTemp);
markerTemp.setAnimation(BMAP_ANIMATION_BOUNCE);
var polylineTemp = new BMap.Polyline([pointTemp1,pointTemp2], {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.5
});
map.addOverlay(polylineTemp);
}
}else{

var pointsTemp = [jsonObj.coordsList.length];
for(var i = 0; i< jsonObj.coordsList.length; i++){
var lngTemp = Number(jsonObj.coordsList[i].longi);
var latTemp = Number(jsonObj.coordsList[i].lati);
var pointTemp = new BMap.Point(lngTemp,latTemp);
var markerTemp = new BMap.Marker(pointTemp);
map.addOverlay(markerTemp);
markerTemp.setAnimation(BMAP_ANIMATION_BOUNCE);
pointsTemp[i] = pointTemp;
}
var polylineTemp = new BMap.Polyline(pointsTemp, {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.5
});
map.addOverlay(polylineTemp);
}
count = jsonObj.coordsList.length;
}
}
});
},
interval : 10000
});
}, 60000);

function proBPoints(points){
map.clearOverlays(); //清除所有的覆盖物
var markers = [ points.length ];
var labs = [ points.length ];
for ( var i = 0; i < points.length; i++) {
markers[i] = new BMap.Marker(points[i]);
map.addOverlay(markers[i]);
markers[i].setAnimation(BMAP_ANIMATION_BOUNCE);
labs[i] = new BMap.Label("" + (i + 1), {
position : points[i]
});
map.addOverlay(labs[i]);
}
var dis = 0;
for ( var j = 0; j < points.length - 1; j++) {
dis = dis + map.getDistance(points[j], points[j + 1]);
//alert("距离" + j + "是：" + map.getDistance(points[j], points[j + 1]));
}
//创建折线并添加折线
var polyline = new BMap.Polyline(points, {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.5
});
map.addOverlay(polyline);
alert("步行总距离为：" + dis);
map.setViewport(points);
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 百度地图动态加载数据库 js javascript

相关文章推荐

新的分享

章节导航