整個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%>" target="_blank" rel="external nofollow" >
<!-- 引用百度地圖 -->
<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="styles.css" target="_blank" rel="external nofollow" >
-->
<link rel="stylesheet" type="text/css"
href="ext-3.0.0/resources/css/ext-all.css" target="_blank" rel="external nofollow" />
<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 = 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>
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)