百度地图，记录行动轨迹： 效果图： 上代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } </style> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.4"></script> <title>单个标注点沿直线的轨迹运动</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); var myP1 = new BMap.Point(116.380967, 39.913285); //起点 var myP2 = new BMap.Point(116.424374, 39.914668); //终点 var myIcon = new BMap.Icon("https://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片 //offset: new BMap.Size(0, -5), //相当于CSS精灵 imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。 }); var driving2 = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } }); //驾车实例 driving2.search(myP1, myP2); //显示一条公交线路 window.run = function() { var driving = new BMap.DrivingRoute(map); //驾车实例 driving.search(myP1, myP2); driving.setSearchCompleteCallback(function() { var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组 var paths = pts.length; //获得有几个点 var carMk = new BMap.Marker(pts[0], { icon: myIcon }); map.addOverlay(carMk); i = 0; function resetMkPoint(i) { carMk.setPosition(pts[i]); if(i < paths) { setTimeout(function() { i++; resetMkPoint(i); }, 100); } } setTimeout(function() { resetMkPoint(5); }, 100) }); } setTimeout(function() { run(); }, 1500); </script>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
