为什么选择高德
成功案例
产品优势
数据优势
服务优势
精选权益
产品介绍
基础产品
地图
定位
导航
搜索
特色产品
外勤调度引擎
地图小程序
3D地形图
排线调度服务
GeoHUB定制地图
GIS企业智图
猎鹰轨迹服务
地址服务
LOCA 数据可视化
高德智慧景区
高德企业用车
解决方案
解决方案
智能派单
上门服务调度
零售铺货
智慧物流
智慧交通
出行
O2O
电商
社交
运动
智能硬件
开发支持
Web端
地图 JS API
LOCA数据可视化 API
地图组件
URI API
室内地图 JS API
地铁图 JS API
Android平台
Android 地图SDK
Android 轻量版地图SDK
Android 定位SDK
Android 导航SDK
Android 猎鹰SDK
iOS平台
iOS 地图SDK
iOS 轻量版地图SDK
iOS 定位SDK
iOS 导航SDK
iOS 猎鹰SDK
Web服务
Web服务 API
猎鹰服务 API
物流服务 API
其他
GeoHUB使用指南
微信小程序插件
高德地图手机版
地图Flutter插件
HarmonyOS 地图SDK
帮助与支持
常见问题
合规中心
开发者论坛
加入我们
地图工具
GeoHUB
坐标拾取器
地图名片
地图快速生成器
GeoHUB自定义地图
三维模型转换
服务升级
配额提升
GeoHUB自定义地图
GeoHUB数据中心
商用服务
高级能力
企业智图SaaS
云图市场
控制台
登录
注册
退出
我的消息
云图市场
应用管理
GeoHUB
Loca API 2.0
视角、样式和数据
镜头动画
镜头追踪
多光源
高效数据源
圆点图层
中国城市人口和GDP排行
世界地震分布
全球孔子学院位置可视化
全国粤菜分布情况
棱柱图层
中国某年 GDP 展示
贴地点
深圳高峰期路口
全国交通事件响应
图标图层
智慧交通道路事件情况
标牌点
某片区房价信息
线图层
北京公交线路
连接线图层
中国建交国家
弧度飞线图层
北京人口流出飞线
脉冲线图层
北京人口流入流出情况
北京公交线路
面图层
杭州功能区
北京凯德茂
北京首都机场
极光过渡效果
普通热力图
杭州房屋交易量
全国交通事故增长率
青岛差值热力
网格热力图
武汉车辆密度分布
蜂窝热力图
杭州高峰期路口延误
标注图层
北京充电桩分布
济南历下小区
激光图层
望京区域数据分布
‹
›
镜头轨迹追踪
源代码编辑器
复制
运行
还原
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 北京某路线轨迹图 </title> <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } .demo-title { position: absolute; top: 50px; left: 50px; z-index: 1; } h1 { margin: 0; color: rgba(255, 255, 255, 0.75); } h3 { font-weight: normal; margin-top: 5px; color: rgba(255, 255, 255, 0.75); } .start-btn { position: absolute; bottom: 20px; right: 20px; padding: 0 18px; height: 30px; background-color: #1A66FF; border-radius: 5px; z-index: 1; cursor: pointer; } .start-btn>a { color: #fff; display: block; height: 100%; line-height: 30px; text-align: center; font-size: 14px; } .amap-ani { width: 44px; height: 52px; background: url('http://a.amap.com/Loca/static/loca-v2/demos/images/track_marker.png'); background-size: 44px 52px; } </style> </head> <body> <div class="demo-title"> <h1>镜头--北京某地区导航路径追踪</h1> <h3>使用轨迹追踪能力追踪导航路径</h3> </div> <div class="start-btn"> <a>开始镜头追踪</a> </div> <div id="map"></div> <script src="http://webapi.amap.com/maps?v=2.1Beta&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script> <script src="http://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script> <script> window.movingDraw = true; var map = new AMap.Map('map', { terrain: true, viewMode: '3D', zoom: 13.5, center: [102.620455, 30.973672], pitch: 45, rotation: -90, showLabel: true, mapStyle: 'amap://styles/509934ebf66e54cbfe10ccae0056c462', showBuildingBlock: false, dragEnable: false, zoomEnable: false, }); var loca = window.loca = new Loca.Container({ map, }); var path = [ [102.620455, 30.973672], [102.620983, 30.973509], [102.621572, 30.973171], [102.62226, 30.972732], [102.623303, 30.972028], [102.62407, 30.971587], [102.624621, 30.971056], [102.624861, 30.970932], [102.625467, 30.97074], [102.625925, 30.970587], [102.626097, 30.970503], [102.626244, 30.970378], [102.626672, 30.969989], [102.627108, 30.969662], [102.628539, 30.968951], [102.629371, 30.968594], [102.630044, 30.968308], [102.630641, 30.968114], [102.631158, 30.968034], [102.631538, 30.967968], [102.631821, 30.967853], [102.632196, 30.967649], [102.632853, 30.96738], [102.633672, 30.967171], [102.633813, 30.967099], [102.633938, 30.966991], [102.634014, 30.966863], [102.634064, 30.966727], [102.634142, 30.966406], [102.63411, 30.966188], [102.633993, 30.965986], [102.633701, 30.965595], [102.633654, 30.96545], [102.633634, 30.965307], [102.633906, 30.964651], [102.634166, 30.964221], [102.634372, 30.964006], [102.635035, 30.963904], [102.636576, 30.963516], [102.637393, 30.96333], [102.638094, 30.963074], [102.638532, 30.962883], [102.638924, 30.962616], [102.639141, 30.962542], [102.639412, 30.962503], [102.63967, 30.962478], [102.639925, 30.962482], [102.640288, 30.96258], [102.640659, 30.962719], [102.641197, 30.962934], [102.641476, 30.963002], [102.641762, 30.963021], [102.642222, 30.962888], [102.642626, 30.96264], [102.642985, 30.962378], [102.643326, 30.962075], [102.643653, 30.961789], [102.644024, 30.961593], [102.644532, 30.961468], [102.645027, 30.96138], [102.645491, 30.961254], [102.645931, 30.961111], [102.646739, 30.960731], [102.647004, 30.960562], [102.647208, 30.960373], [102.647478, 30.960075], [102.64783, 30.959846], [102.64866, 30.959388], [102.649214, 30.959111], [102.649324, 30.959104], [102.649448, 30.959136], [102.649636, 30.959244], [102.649978, 30.959435], [102.650586, 30.959927], [102.651241, 30.960866], [102.651541, 30.961247], [102.651854, 30.961629], [102.651992, 30.961874], [102.652061, 30.96216], [102.652212, 30.96251], [102.652274, 30.962605], [102.652391, 30.962698], [102.652677, 30.962818], [102.652839, 30.962866], [102.653003, 30.962892], [102.653145, 30.962911], [102.653428, 30.962889], [102.654088, 30.962697], [102.654437, 30.962608], [102.654778, 30.962586], [102.655313, 30.962669], [102.655822, 30.962833], [102.656613, 30.963273], [102.657072, 30.963403], [102.657516, 30.963397], [102.658151, 30.963362], [102.658806, 30.963425], [102.659335, 30.963619], [102.659791, 30.963887], [102.660783, 30.964359], [102.661623, 30.964707], [102.661992, 30.965069], [102.662291, 30.965404], [102.662728, 30.965633], [102.663677, 30.965807], [102.664344, 30.965798], [102.664943, 30.96573], [102.665439, 30.96574], [102.666209, 30.965802], [102.667425, 30.96588], [102.668039, 30.966025], [102.668659, 30.966223], [102.66918, 30.966444], [102.6696, 30.966667], [102.670046, 30.96699], [102.670394, 30.96719], [102.670772, 30.96735], [102.671176, 30.967418], [102.671609, 30.967369], [102.671969, 30.967289], [102.672362, 30.967137], [102.672688, 30.966955], [102.672871, 30.966818], [102.67308, 30.966703], [102.673279, 30.966615], [102.673473, 30.966577], [102.673612, 30.966558], [102.673753, 30.966565], [102.674032, 30.966614], [102.674333, 30.966736], [102.67488, 30.966996], [102.675116, 30.96709], [102.675364, 30.967135], [102.675515, 30.967148], [102.675658, 30.96713], [102.676026, 30.96701], [102.676504, 30.966847], [102.676681, 30.966786], [102.676881, 30.966817], [102.677824, 30.967046], [102.678406, 30.967105], [102.679198, 30.967101], [102.679757, 30.967391], [102.680209, 30.967791], [102.680689, 30.968058], [102.68117, 30.968253], [102.681791, 30.968409], [102.682817, 30.968586], [102.683399, 30.968744], [102.683736, 30.968969], [102.683948, 30.969323], [102.68406, 30.969656], [102.684255, 30.970039], [102.684545, 30.970231], [102.685078, 30.970392], [102.6866, 30.9705], [102.688109, 30.970816], [102.688575, 30.970934], [102.688725, 30.971077], [102.688807, 30.971276], [102.689073, 30.971961], [102.689334, 30.97225], [102.690776, 30.973397], [102.691207, 30.973707], [102.691853, 30.974017], [102.692454, 30.974156], [102.692769, 30.974195], [102.693341, 30.974248], [102.694711, 30.974302], [102.695642, 30.974351], [102.696004, 30.974386], [102.696359, 30.974483], [102.69711, 30.974733], [102.697494, 30.974742], [102.698541, 30.974654], [102.699323, 30.974706], [102.699846, 30.974773], [102.700405, 30.974921], [102.70133, 30.975293], [102.702067, 30.975762], [102.702831, 30.976012], [102.703887, 30.976271], [102.704883, 30.976444], [102.705596, 30.976709], [102.706382, 30.976718], [102.707474, 30.976666], [102.708384, 30.97669], [102.709171, 30.976868], [102.709552, 30.977001], [102.70982, 30.97716], [102.710386, 30.977454], [102.710748, 30.977593], [102.711001, 30.977628], [102.711213, 30.977619], [102.712274, 30.977373], [102.713164, 30.977089], [102.713696, 30.977053], [102.714385, 30.977106], [102.714798, 30.977166], [102.715426, 30.977347], [102.716309, 30.977593], [102.717449, 30.977835], [102.717982, 30.97796], [102.718493, 30.978033], [102.719058, 30.978007], [102.72004, 30.977953], [102.720769, 30.977866], [102.721135, 30.977778], [102.721388, 30.977748], [102.721628, 30.977754], [102.72194, 30.97779], [102.722273, 30.977908], [102.723238, 30.978362], [102.723634, 30.978483], [102.724022, 30.978535], [102.724612, 30.978435], [102.725085, 30.978242], [102.725845, 30.978073], [102.727159, 30.977852], [102.728005, 30.977773], [102.728786, 30.977763], [102.729269, 30.977671], [102.729876, 30.977426], [102.730245, 30.977309], [102.730555, 30.977282], [102.731073, 30.977326], [102.73216, 30.977325], [102.733195, 30.977231], [102.735779, 30.976871], [102.738582, 30.977275], [102.740012, 30.976898], [102.740521, 30.976848], [102.740958, 30.976819], [102.741357, 30.976882], [102.741622, 30.976868], [102.741821, 30.976823], [102.742036, 30.976752], [102.742214, 30.976643], [102.742572, 30.97636], [102.74308, 30.976153], [102.743611, 30.976151], [102.744155, 30.976267], [102.744654, 30.976415], [102.745375, 30.976685], [102.746097, 30.97689], [102.746959, 30.976965], [102.748975, 30.977107], [102.749902, 30.977218], [102.750443, 30.977322], [102.750868, 30.977464], [102.752511, 30.977973], [102.752808, 30.978017], [102.753056, 30.978009], [102.753645, 30.977927], [102.754184, 30.977794], [102.754746, 30.977633], [102.754992, 30.977618], [102.755201, 30.977671], [102.755865, 30.978031], [102.756311, 30.978221], [102.756602, 30.978282], [102.756848, 30.978266], [102.758914, 30.978011], [102.759204, 30.978051], [102.759489, 30.978137], [102.760089, 30.97841], [102.76072, 30.978469], [102.761288, 30.978487], [102.761972, 30.978481], [102.762671, 30.97839], [102.762925, 30.978384], [102.763169, 30.978385], [102.763585, 30.978389], [102.764093, 30.978289], [102.76458, 30.978144], [102.765056, 30.978006], [102.765477, 30.977954], [102.766054, 30.977906], [102.7665, 30.977904], [102.76671, 30.977923], [102.766987, 30.978007], [102.767203, 30.97812], [102.76757, 30.978301], [102.767777, 30.978399], [102.76785, 30.978416], [102.767918, 30.978428], [102.768092, 30.97845], [102.768422, 30.978471], [102.769034, 30.978523], [102.769312, 30.978566], [102.769548, 30.978618], [102.769851, 30.978723], [102.770245, 30.978931], [102.77052, 30.97899], [102.771251, 30.979176], [102.771626, 30.979283], [102.771927, 30.979356], [102.772244, 30.97941], [102.772763, 30.979432], [102.773154, 30.97944], [102.773514, 30.979475], [102.773904, 30.979543], [102.774222, 30.979628], [102.774504, 30.979708], [102.77475, 30.979859], [102.774966, 30.980015], [102.775149, 30.980216], [102.775426, 30.980595], [102.775902, 30.981345], [102.776724, 30.981858], [102.77885, 30.982962], [102.779973, 30.983804], [102.780329, 30.984017], [102.780878, 30.98421], [102.78147, 30.984486], [102.781741, 30.984804], [102.78216, 30.98529], [102.782825, 30.985779], [102.783142, 30.986345], [102.784073, 30.987145], [102.784673, 30.987339], [102.785095, 30.987566], [102.785588, 30.987994], [102.785982, 30.988373], [102.786446, 30.988659], [102.786949, 30.988864], [102.787373, 30.989142], [102.788105, 30.989612], [102.788814, 30.989783], [102.789653, 30.989923], [102.790126, 30.990147], [102.790973, 30.990685], [102.791625, 30.990791], [102.792777, 30.990803], [102.793542, 30.990477], [102.794021, 30.990399], [102.795064, 30.990441], [102.796509, 30.990231], [102.797863, 30.989926], [102.799504, 30.990064], [102.801872, 30.989473], [102.803936, 30.989014], [102.805857, 30.988779], [102.806527, 30.988838], [102.807179, 30.989045], [102.808194, 30.989473], [102.809275, 30.989535], [102.810476, 30.989457], [102.811314, 30.989346], [102.811928, 30.989305], [102.812595, 30.989299], [102.813017, 30.989385], [102.81386, 30.989808], [102.814743, 30.990133], [102.815854, 30.990504], [102.81699, 30.990596], [102.818488, 30.990301], [102.819357, 30.990612], [102.820182, 30.990756], [102.820941, 30.990714], [102.821301, 30.990638], [102.821481, 30.990602], [102.821662, 30.990601], [102.821882, 30.990646], [102.822077, 30.990713], [102.822348, 30.990833], [102.82271, 30.991001], [102.823064, 30.991117], [102.823453, 30.991151], [102.82389, 30.991103], [102.824218, 30.991032], [102.824698, 30.990864], [102.824949, 30.990831], [102.825136, 30.990843], [102.82537, 30.99086], [102.825599, 30.99088], [102.825845, 30.990917], [102.82612, 30.990978], [102.826332, 30.991057], [102.826542, 30.991194], [102.826742, 30.991378], [102.826941, 30.991541], [102.827185, 30.991662], [102.827422, 30.991753], [102.827742, 30.991836], [102.828079, 30.991908], [102.828339, 30.991998], [102.828755, 30.99217], [102.829008, 30.992327], [102.829194, 30.992545], [102.829334, 30.992772], [102.829429, 30.992917], [102.829611, 30.993071], [102.829925, 30.993177], [102.831209, 30.993469], [102.832315, 30.99383], [102.834562, 30.994623], ]; // 轨迹 var marker = new AMap.Marker({ position: [102.834562, 30.994623], content: '<div class="amap-ani"></div>', anchor: 'bottom-center', map: map, }) var polyline = new AMap.Polyline({ path: [[102.620456, 30.973672], [102.620456, 30.973672]], isOutline: false, strokeColor: '#00E98F', strokeOpacity: 1, strokeWeight: 16, strokeStyle: 'solid', lineJoin: 'round', lineCap: 'round', zIndex: 500, map: map, }); var finished = false; function run() { if (!finished) { var center = map.getCenter().toArray(); var lastPath = polyline.getPath(); lastPath.push(center); if (lastPath.length === 1) { lastPath.push(center); } polyline.setPath(lastPath); marker.setPosition(center); } requestAnimationFrame(run); } run(); loca.animate.start(); document.querySelector('.start-btn').addEventListener('click', function () { finished = false; polyline.setPath([[102.620456, 30.973672], [102.620456, 30.973672]]); loca.viewControl.addTrackAnimate({ path: path, // 镜头轨迹,二维数组,支持海拔 duration: 120000, // 时长 timing: [[0, 0.3], [1, 0.7]], // 速率控制器 rotationSpeed: 10, // 每秒旋转多少度 }, function () { finished = true; console.log('完成'); }); }); </script> </body> </html>
控制台
清空
示例
中心
常见
问题
智能
客服