注意是HTTPS還是HTTP index.html引入 <script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script> //地圖renderMap (data) {var marker = [];var that = thisfor (let i in JSON.parse(data.coordinate)) {let Ary = [];Ary.push(Number(JSON.parse(data.coordinate)[i].o));Ary.push(Number(JSON.parse(data.coordinate)[i].p));marker.push(Ary);}var lineArr = marker上面是后端返回的數據 自己處理成官方需要的格式AMap.plugin('AMap.MoveAnimation', function () {// var marker, lineArr = [[116.478935, 39.997761], [116.478939, 39.997825], [116.478912, 39.998549], [116.478912, 39.998549], [116.478998, 39.998555], [116.478998, 39.998555], [116.479282, 39.99856], [116.479658, 39.998528], [116.480151, 39.998453], [116.480784, 39.998302], [116.480784, 39.998302], [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]];var map = new AMap.Map("container", {resizeEnable: true,center: [116.397428, 39.90923],zoom: 17});marker = new AMap.Marker({map: map,position: marker[0],icon: "static/images/xcjl/dws_icon.png",offset: new AMap.Pixel(-15, -16),});// 繪制軌跡var polyline = new AMap.Polyline({map: map,path: lineArr,showDir: true,strokeColor: "#28F", //線顏色// strokeOpacity: 1, //線透明度strokeWeight: 6, //線寬// strokeStyle: "solid" //線樣式});var passedPolyline = new AMap.Polyline({map: map,strokeColor: "#AF5", //線顏色strokeWeight: 6, //線寬});marker.on('moving', function (e) {passedPolyline.setPath(e.passedPath);map.setCenter(e.target.getPosition(), true)});map.setFitView();window.startAnimation = function startAnimation () {marker.moveAlong(lineArr, {// 每一段的時長duration: 100,//可根據實際采集時間間隔設置// JSAPI2.0 是否延道路自動設置角度在 moveAlong 里設置autoRotation: true,});};// window.pauseAnimation = function () {// marker.pauseMove();// };// window.resumeAnimation = function () {// marker.resumeMove();// };// window.stopAnimation = function () {// marker.stopMove();// };});},

總結

以上是生活随笔為你收集整理的H5移动端 高德地图 巡查轨迹回放 2.0版的全部內容，希望文章能夠幫你解決所遇到的問題。

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