百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移
参考网址：https://blog.csdn.net/skywqnan/article/details/79036262
改变车的方向：http://www.cnblogs.com/peixuanzhihou/p/6540086.html
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度地图的动态行驶轨迹</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
</head>
<body>
<div id="mapId" style="height: 500px;">
<script>
var map = new BMap.Map("mapId");
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
// map.centerAndZoom("青岛", 8); var PointArr = [
{lat: 36.10339957700999, lng: 120.4207801005104},
{lat: 36.10349055332635,lng: 120.42113539348455},
{lat: 36.10370795896673,lng: 120.42162977768736},
{lat: 36.10411490190429,lng: 120.42166901055167},
{lat: 36.104232027406695,lng: 120.42185015059275},
{lat: 36.10425620255758,lng: 120.42202022562539},
{lat: 36.104265908631284,lng: 120.42208225102176},
{lat: 36.104399968669526,lng: 120.42187425183421},
{lat: 36.10452708476511,lng: 120.42076268466177},
{lat: 36.10480132817409, lng: 120.4196557913201},
{lat: 36.10560773716036,lng: 120.418951386886},
{lat: 36.10621159088823,lng: 120.41900182905378},
{lat: 36.1064641068988,lng: 120.41992809616544},
{lat: 36.10679444086644,lng: 120.42102125032955},
{lat: 36.107010189089046,lng: 120.42182982905027},
{lat: 36.107014665948654,lng: 120.42193587265254},
{lng: 120.42201589513277, lat: 36.10700627324672},
{lng: 120.42201589513277, lat: 36.10700627324672},
{lng: 120.42236704579075, lat: 36.10708566579729},
{lng: 120.42269817692573, lat: 36.107201270041955},
{lng: 120.42239277578172, lat: 36.10812797579566},
{lng: 120.42175457671763, lat: 36.10947659586882},
{lng: 120.42144906678747, lat: 36.11028554037044},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.4213722360578, lat: 36.110547069787465},
{lng: 120.42134433787885, lat: 36.110691285540966},
{lng: 120.42234193234574, lat: 36.110931417305515},
{lng: 120.42374305054953, lat: 36.11109804633305},
{lng: 120.42478859440246, lat: 36.111102173671576},
{lng: 120.42606467439863, lat: 36.11129314178323},
{lng: 120.4274220550685, lat: 36.11148065963647},
{lng: 120.42831965719076, lat: 36.111638311669736},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42839951065358, lat: 36.11164240198062},
{lng: 120.42869196887202, lat: 36.1116737914188},
{lng: 120.43031048017785, lat: 36.11190642360766},
{lng: 120.43239173942534, lat: 36.11229570404404},
{lng: 120.43368467575368, lat: 36.11281195352835},
{lng: 120.43371757862009, lat: 36.11284016439977},
{lng: 120.43379230066179, lat: 36.11284161798212},
{lng: 120.43441423254144, lat: 36.113205746094536},
{lng: 120.43549342023326, lat: 36.11391074053337},
{lng: 120.43637497341942, lat: 36.11441797319607},
{lng: 120.4365024200745, lat: 36.11445405475196},
{lng: 120.43670459776231, lat: 36.11458083085174},
{lng: 120.43745246924915, lat: 36.11507070008782},
{lng: 120.43821097991501, lat: 36.115416050767585},
{lng: 120.43821097991501, lat: 36.115416050767585},
{lng: 120.43821097991501, lat: 36.115416050767585},
{lng: 120.43821097991501, lat: 36.115416050767585},
{lng: 120.43821097991501, lat: 36.115416050767585},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43823585473245, lat: 36.11541929557907},
{lng: 120.43859812511984, lat: 36.115583971494395},
{lng: 120.43901701857004, lat: 36.115714318017346},
{lng: 120.43928467292172, lat: 36.11582517772885},
{lng: 120.43959708522435, lat: 36.115963587312805},
{lng: 120.43986466921422, lat: 36.116047547858166},
{lng: 120.44007952157578, lat: 36.11611896447754},
{lng: 120.440167025596, lat: 36.11612294605039},
{lng: 120.440167025596, lat: 36.11612294605039},
{lng: 120.44024360205321, lat: 36.116138815526504},
{lng: 120.44024360205321, lat: 36.116138815526504},
{lng: 120.44024360205321, lat: 36.116138815526504},
{lng: 120.44026150723737, lat: 36.11614702160796},
{lng: 120.44027344364953, lat: 36.11615215895656},
{lng: 120.44027344364953, lat: 36.11615215895656},
{lng: 120.44028836484941, lat: 36.1161593311561},
{lng: 120.44034209724579, lat: 36.116201960713745},
{lng: 120.44048233691922, lat: 36.116254585044935},
{lng: 120.44048233691922, lat: 36.116254585044935},
{lng: 120.4405738257871, lat: 36.116276646228826},
{lng: 120.44073595695149, lat: 36.11635856195875},
{lng: 120.44115463412841, lat: 36.11652357056175},
{lng: 120.44118546544034, lat: 36.11653994619434},
{lng: 120.44118546544034, lat: 36.11653994619434},
{lng: 120.44121529948468, lat: 36.1165533090833}];
map.centerAndZoom(PointArr, 13);// 根据经纬度显示地图的范围
map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野 addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map);
var carMk;//先将终点坐标展示的mark对象定义
//小车行驶图标
var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26), {
anchor : new BMap.Size(27, 13),
imageSize:new BMap.Size(52,26)
});
//终点图标
var terminalPoint = new BMap.Icon('endMap.png', new BMap.Size(45,45), {
anchor : new BMap.Size(20, 45),
imageSize:new BMap.Size(45,45)
});
var i = 0;
var interval = setInterval(function () {
if (i >= PointArr.length) {
clearInterval(interval);
return;
}
drowLine(map,PointArr[i],PointArr[i+1]);//画线调用
i = i + 1;
}, 1000); // 划线
function drowLine(map,PointArr,PointArrNext) {
if(PointArrNext!=undefined) {
var polyline = new BMap.Polyline(
[
new BMap.Point(PointArr.lng, PointArr.lat),
new BMap.Point(PointArrNext.lng, PointArrNext.lat)
],
{
strokeColor: "red",
strokeWeight: 7,
strokeOpacity: 1
}); //创建折线
map.addOverlay(polyline);
addMarkerEnd(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '小车行驶', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat));//添加图标
}else {
addMarkerEnd(new BMap.Point(PointArr.lng, PointArr.lat), '终点', map);//添加终点图标
}
}
//添加起始图标
function addStartMarker(point, name,mapInit) {
if(name=="起点"){
var myIcon = new BMap.Icon("startMap.png", new BMap.Size(45,45),{
anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
imageSize:new BMap.Size(45, 45)//图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
// offset: new BMap.Size(-10, 45), // 指定定位位置
// imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
});
window.marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
mapInit.addOverlay(marker); // 将标注添加到地图中
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
}
//添加行驶和终点图标
function addMarkerEnd(point, name,mapInit,trackUnit,prePoint) {
if(name=="小车行驶"){
if(carMk){//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
mapInit.removeOverlay(carMk);
}
carMk = new BMap.Marker(point,{icon:drivingPoint}); // 创建标注
carMk.setRotation(trackUnit.route);//trackUnit.route
//getAngle(point,prePoint);// js求解两点之间的角度
carMk.setRotation(getAngle(point,prePoint)-90);// 旋转的角度
mapInit.addOverlay(carMk); // 将标注添加到地图中
//carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}else {
mapInit.removeOverlay(carMk);
carMk = new BMap.Marker(point,{icon:terminalPoint}); // 创建标注
mapInit.addOverlay(carMk);
}
}
//获得角度的函数
function getAngle(n,next){
var ret
var w1 = n.lat/180 * Math.PI
var j1 = n.lng/180 * Math.PI var w2 = next.lat/180 * Math.PI
var j2 = next.lng/180 * Math.PI ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
ret = Math.sqrt(ret); // var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
console.log(temp)
ret = ret/temp; ret = Math.atan(ret) / Math.PI * 180 ;
ret += 90; // 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
if(j1-j2 < 0){
// console.log('j1<j2')
if(w1-w2 < 0){
// console.log('w1<w2')
ret;
}else{
// console.log('w1>w2')
ret = -ret+180;
}
}else{
// console.log('j1>j2')
if(w1-w2 < 0){
// console.log('w1<w2')
ret = 180+ret;
}else{
// console.log('w1>w2')
ret = -ret;
}
}
return ret ;
} </script>
</body>
</html>
代码中需要的2张图片：
百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移的更多相关文章
- 【百度地图API】北京周边7日游——图标按路线轨迹行动
原文:[百度地图API]北京周边7日游--图标按路线轨迹行动 任务描述: 春节就要来啦~酸奶小妹的妈妈要从遥远的重庆,来到北京过春节呢!酸奶小妹忙着给妈妈计划,北京周边的旅游线路.计划好路线后,就开始 ...
- 使用html5获取当前手机的经纬度，并接入百度地图API，查询出当前位置
最近项目需要,稍微研究一下html5获取当前地理位置的问题. 获取当前位置的经纬度很简单,一句代码就搞定 navigator.geolocation.getCurrentPosition(functi ...
- web端百度地图API实现实时轨迹动态展现
最近在工作中遇到了一个百度地图api中的难题,恐怕有的程序员可能也遇到过.就是实时定位并显示轨迹,网上大部分都是通过创建polyline对象贴到地图上.当然,百度地图的画线就是这样实现的,但是好多人会 ...
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- 调用百度地图API的应用混淆后出问题
1 混淆后出问题,程序异常退出 在proguard-project.txt中添加 -libraryjars libs/BaiduLBS_Android.jar -keep class com.baid ...
- 【地图功能开发系列：二】根据地址名称通过百度地图API查询出坐标
根据地址名称通过百度地图API查询出坐标 百度地图ApiUrl string url = "http://api.map.baidu.com/geocoder?address={0}& ...
- achartengine画出动态折线图
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...
- 利用百度地图API和群蚁算法，对TSP问题进行模拟与求解
前言 最近由于换了工作,期间也有反思和总结上家公司的得失,总觉得有什么事情当初可以完成或者完成得更好,其中TSP问题就是其中之一.当初在开发一个仓配系统的时候,有一个线路排程的需求,当时自己简单在纸上 ...
- 百度地图API开发一——仿照现有测距效果实现测面功能
最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包——BMapLib.DistanceTool,效果如下: 这个效果体验很好 ...
随机推荐
- kafka知识点详解
第一部分:kafka概述 一.定义(消息引擎系统) 一句话概括kafka的核心功能就是:高性能的消息发送与高性能的消息消费. kafka刚推出的时候是以消息引擎的身份出现的,它具有强大的消息传输效率和 ...
- Django ----- app 和 ORM的操作和介绍
创建APP ORM 介绍 ORM的操作 说明一下 GET 和 POST 的区别: , GET ①获取一个页面 ②提交数据 数据显示在URL ?user=alex&pwd=alexdsb ,PO ...
- 【原创】大数据基础之Oozie（2）使用
命令行 $ oozie help 1 导出环境变量 $ export OOZIE_URL=http://oozie_server:11000/oozie 否则都需要增加 -oozie 参数,比如 $ ...
- bzoj 2780
后缀自动机的应用 首先我们观察到:如果一个询问串的答案不为0,那么这个串一定是至少一个模式串的子串 如果只有一个模式串,那么这个问题可以简单地用什么东西解决掉(比如普通后缀自动机) 而这里有很多模式串 ...
- bzoj 2028（会场预约）
题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地. 这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一 ...
- [原创]基于Zynq Linux环境搭建(二)
在此篇,我们编译UBOOT 解压: [#17#17:26:56 FPGADeveloper@ubuntu ~/Zybo_Demo]$tar zxvf *.tar.gz 在解压过程中出现下述问题 tar ...
- c++ typeid
简单使用 #include<iostream> #include<string> #include<new> #include<typeinfo> us ...
- [转]国家税务总局：个税专项附加扣除APP正式启用！（附操作指南）
https://wallstreetcn.com/articles/3462504 12月31日国家税务总局官网消息,个人所得税专项附加扣除政策将于2019年1月1日起实施.2018年12月31日,由 ...
- SQL Server数据库中导入导出数据及结构时主外键关系的处理
2015-01-26 软件开发中,经常涉及到不同数据库(包括不同产品的不同版本)之间的数据结构与数据的导入导出.处理过程中会遇到很多问题,尤为突出重要的一个问题就是主从表之间,从表有外检约束,从而导致 ...
- Base64 加解密
import java.io.UnsupportedEncodingException; import org.apache.tomcat.util.codec.binary.Base64; /** ...