轨迹回放

html, body, #container {

height: 100%;

width: 100%;

}

.input-card .btn{

margin-right: 1.2rem;

width: 9rem;

}

.input-card .btn:last-child{

margin-right: 0;

}

轨迹回放控制

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: [116.478935,39.997761],

icon: "https://webapi.amap.com/images/car.png",

offset: new AMap.Pixel(-26, -13),

autoRotation: true,

angle:-90,

});

// 绘制轨迹

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,

// path: lineArr,

strokeColor: "#AF5", //线颜色

// strokeOpacity: 1, //线透明度

strokeWeight: 6, //线宽

// strokeStyle: "solid" //线样式

});

marker.on('moving', function (e) {

passedPolyline.setPath(e.passedPath);

});

map.setFitView();

function startAnimation () {

marker.moveAlong(lineArr, 200);

}

function pauseAnimation () {

marker.pauseMove();

}

function resumeAnimation () {

marker.resumeMove();

}

function stopAnimation () {

marker.stopMove();

}

高德地图轨迹PHP,轨迹回放-点标记-示例中心-JS API 示例 | 高德地图API相关推荐

  1. android中高德地图轨迹回放,轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API...

    轨迹回放 html, body, #container { height: 100%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; w ...

  2. html 高德地图坐标,点标记-调起高德地图-示例中心-JS API 示例 | 高德地图API

    点标记 html,body,#container{ height:100%; } 手机扫码打开示例 var map = new AMap.Map("container", { zo ...

  3. android高德地图自定义带数字marker图标,自定义图标-点标记-示例中心-JS API 示例 | 高德地图API...

    图标点标记 html,body,#container{ height:100%; width:100%; } .amap-icon img{ width: 25px; height: 34px; } ...

  4. php 高德地图创建标注,自定义图标-点标记-示例中心-JS API 示例 | 高德地图API

    图标点标记 html,body,#container{ height:100%; width:100%; } .amap-icon img{ width: 25px; height: 34px; } ...

  5. HTML高德地图标注,文本标记-点标记-示例中心-JS API 示例 | 高德地图API

    文本标记 html, body, #container { height: 100%; width: 100%; } var map = new AMap.Map("container&qu ...

  6. android德地图点聚合,点聚合-点标记-示例中心-JS API 示例 | 高德地图API

    点聚合 html, body, #container { height: 100%; width: 100%; } .input-card { width: 25rem; } .input-card ...

  7. android 高德定位 区域,区域定位-行政区划浏览-示例中心-JS API UI 组件示例 | 高德地图API...

    区域定位 html, body, #container { width: 100%; height: 100%; margin: 0px; } #locTip { position: absolute ...

  8. php高德地图计算距离接口,路径长度-距离/面积计算-示例中心-JS API 示例 | 高德地图API...

    点到线的距离和最近点 html,body,#container{ height: 100% } //初始化地图对象,加载地图 var map = new AMap.Map("containe ...

  9. android 高德拖拽地图定位,拖拽选址-拖拽选址-示例中心-JS API UI 组件示例 | 高德地图API...

    拖拽选址 html, body { height: 100%; margin: 0; width: 100%; padding: 0; overflow: hidden; font-size: 13p ...

最新文章

  1. [dp] Jzoj P5804 简单的序列
  2. android的权限问题
  3. monkeyrunner环境配置
  4. 在asp.net mvc中使用PartialView返回部分HTML段
  5. bat脚本注释多行_cmd批处理常用符号详解
  6. ipv6 访问内网_【内网渗透】—— 隐藏通信隧道技术之网络层隧道技术
  7. Qt6 在线安装图文步骤
  8. win10 iot core java_Windows 10 IoT Core开发环境
  9. NumPy基础操作(1)
  10. ECM之ucf session wait timeout【DFC_ACS_LOG_NO_NL】问题分析
  11. 安装 jupyter notebook
  12. centos7恢复mysql数据库_centos7 mysql数据库的安装与使用
  13. 本草纲目pdf彩图版下载_本草纲目彩色图谱下载|本草纲目彩色图集(精编珍藏版) PDF电子版 - 天天游戏吧...
  14. Mysql索引优化和锁机制
  15. 依图三变,“退群”AI四小龙
  16. 计算机平面设计主要学什么 - 兔课网,兔课网:初学平面要怎么样构图?
  17. 简历||STAR法则
  18. 罗技c930e摄像头描述符
  19. LeetCode 0592. 分数加减运算:手把手分步のC++讲解
  20. 【神策数据面试】手撕题

热门文章

  1. RPC实现Consumer 远程调用
  2. 并发的发展历史-集成电路和多道程序设计
  3. 基于Xml 的IOC 容器-载入<list>的子元素
  4. 什么时候需要任务调度?
  5. SpringBoot_入门-微服务简介
  6. 计算机有残留office,电脑中无法安装Office2013删除残留文件的方法
  7. 长江大学微型计算机课设报告,长江大学B第一学期计算机基础试卷.doc
  8. 200905阶段一C++链表与继承特性
  9. 第一章:系统困境之 再努力也不能直接打开的死结
  10. IIS崩溃时自动抓取Dump