【實例簡介】

【實例截圖】

【核心代碼】

Track

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}

#container{height:100%}

//獲取所有點的坐標

var points = [

new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),

new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),

new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),

new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),

new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),

new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)

];

var map; //百度地圖對象

var car; //汽車圖標

var label; //信息標簽

var centerPoint;

var timer; //定時器

var index = 0; //記錄播放到第幾個point

var followChk, playBtn, pauseBtn, resetBtn; //幾個控制按鈕

function init() {

followChk = document.getElementById("follow");

playBtn = document.getElementById("play");

pauseBtn = document.getElementById("pause");

resetBtn = document.getElementById("reset");

//初始化地圖,選取第一個點為起始點

map = new BMap.Map("container");

map.centerAndZoom(points[0], 15);

map.enableScrollWheelZoom();

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.ScaleControl());

map.addControl(new BMap.OverviewMapControl({isOpen: true}));

//通過DrivingRoute獲取一條路線的point

var driving = new BMap.DrivingRoute(map);

driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));

driving.setSearchCompleteCallback(function() {

//得到路線上的所有point

points = driving.getResults().getPlan(0).getRoute(0).getPath();

//畫面移動到起點和終點的中間

centerPoint = new BMap.Point((points[0].lng points[points.length - 1].lng) / 2, (points[0].lat points[points.length - 1].lat) / 2);

map.panTo(centerPoint);

//連接所有點

map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));

//顯示小車子

label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});

car = new BMap.Marker(points[0]);

car.setLabel(label);

map.addOverlay(car);

//點亮操作按鈕

playBtn.disabled = false;

resetBtn.disabled = false;

});

}

function play() {

playBtn.disabled = true;

pauseBtn.disabled = false;

var point = points[index];

if(index > 0) {

map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));

}

label.setContent("經度: " point.lng "
緯度: " point.lat);

car.setPosition(point);

index ;

if(followChk.checked) {

map.panTo(point);

}

if(index < points.length) {

timer = window.setTimeout("play(" index ")", 200);

} else {

playBtn.disabled = true;

pauseBtn.disabled = true;

map.panTo(point);

}

}

function pause() {

playBtn.disabled = false;

pauseBtn.disabled = true;

if(timer) {

window.clearTimeout(timer);

}

}

function reset() {

followChk.checked = false;

playBtn.disabled = false;

pauseBtn.disabled = true;

if(timer) {

window.clearTimeout(timer);

}

index = 0;

car.setPosition(points[0]);

map.panTo(centerPoint);

}

畫面跟隨

總結

以上是生活随笔為你收集整理的python实现轨迹回放供应_运动轨迹回放 百度地图api示例源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。