高德地图js api模拟驾车路线动画效果代码
代码语言:html
所属分类:其他
代码描述:高德地图js api模拟驾车路线动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> #container { width: 1000px; height: 600px; } </style> <script> // 扩大作用域 var map = null; var timer = null; var markerList = null; var index = 0; // 异步加载地图策略 var initMap = function () { // 初始化地图 map = new AMap.Map("container", { center: [115.379028, 39.865042], zoom: 18, viewMode: "3D", pitch: 75 }) // 异步加载插件,此时不需要在JS文件后边引入对应的插件,因为现在是异步加载的。 AMap.plugin("AMap.Driving", function () { // 实例化对象 var driving = new AMap.Driving({ // 驾车路线规划策略,LEAST_TIME为最快捷模式。 policy: AMap.DrivingPolicy.LEAST_FEE, map: map }); // 起始和结束坐标位置 var startLngLat = [115.379028, 39.865042]; var endLngLat = [116.427281, 39.903719]; // 开始规划 driving.search(startLngLat, endLngLat, function (status, result) { console.log(status); console.log(result); if (result.info === "OK") { console.log(result.routes[0].steps); alert("全程大约:" + (parseFloat(result.routes[0].distance) / 1000) + "公里,确认3秒后开始模拟车辆行车轨迹。"); markerList = GetMarkers(result); console.log(markerList); // 3秒后开始模拟车辆行车轨迹 window.setTimeout('map.setZoom(16);timer = window.setInterval("AddMarkerToMap(markerList[index++])", 50);', 3000); } else { alert("对不起,系统出现了问题"); } }); }); } // 定时函数 var marker = null; function AddMarkerToMa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0