JS方式實現百度地圖載入資料庫中的座標並實現動態重新整理
阿新 • • 發佈：2019-01-05
"); //設定地圖顯示的城市，這項是必須的
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>
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>