百度地图根据经纬度坐标,显示汽车行驶轨迹
继上一篇:百度地图根据经纬度坐标,显示轨迹 又进行了些许优化。将固定点为变为汽车行驶轨迹并添加点位。
上一篇链接:https://blog.csdn.net/qq_36865945/article/details/107356608
将
改为
后台代码没变动,主要为前端JS代码变动:
首先初始化时 searchTrackmaps();
然后对应的
function searchTrackmaps(vehiclePassTime,cphData) {
//查询基础数据
$.ajax({
type : 'POST',
dataType : "json",
data: {
cphData: cphData,
},
url : '${pageContext.request.contextPath}/webservice/vehicelInfo/TrackMap',
success : function(data) {
setTrackmap(data)
}
});
}
上述代码没变动主要变动为下述代码:
//生成坐标点
var PointArr = [];
var carMk;//先将终点坐标展示的marktrackPoint定义
function setTrackmap(pointArrList) {
var map = new BMap.Map("mapcontainer");
var point = new BMap.Point(87.623272, 43.831565);
map.centerAndZoom(point, 13);
map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
PointArr.splice(0,PointArr.length);
if(pointArrList.length>0){
var s = pointArrList.toString();
var pointStr = s.split(",");
var pointArrs = [];
for (var k = 0; k < pointStr.length; k += 2) {
pointArrs.push({
lng: pointStr[k],
lat: pointStr[k + 1]
});
}
for (var i = 0, j = pointArrs.length; i < j; i++) {
PointArr.push(new BMap.Point(pointArrs[i].lng, pointArrs[i].lat));
}
map.centerAndZoom(PointArr, 14);// 根据经纬度显示地图的范围
map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野
addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map);
var carMk;//先将终点坐标展示的mark对象定义
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);
}
changeMapStyle(map);
}
// 划线
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)
],
{
strokeStyle:"dashed",
strokeColor: "green",
strokeWeight: 3,
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("${pageContext.request.contextPath}/images/ns/carDocument/start.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);
}
var drivingPoint = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/carr.png", new BMap.Size(67,40), {
anchor : new BMap.Size(27, 13),
imageSize:new BMap.Size(67,40)
});
var dianweiIcon = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/u191.svg", new BMap.Size(33, 50));
var offset = new BMap.Size(0, -13);
var marker = new BMap.Marker(point, {
icon: dianweiIcon,
offset: offset
}); // 创建标注
mapInit.addOverlay(marker);
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 {
//终点图标
var terminalPoint = new BMap.Icon("${pageContext.request.contextPath}/images/ns/carDocument/end.png", new BMap.Size(45,45), {
anchor : new BMap.Size(20, 45),
imageSize:new BMap.Size(45,45)
});
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));
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 ;
}
百度地图根据经纬度坐标,显示汽车行驶轨迹相关推荐
- 百度地图根据经纬度坐标,显示轨迹
1.html 部分设置存放地图的div,定义id和宽高,并引入百度地图相关JS <div id="baiduMap" style="width:600px;heig ...
- Java 百度地图 根据经纬度(坐标) 获取乡镇
申请百度开放平台KEY(ak) 没申请,随便找了一个 参数说明: extensions_town:行政区划返回乡镇级数据(town),仅国内召回乡镇数据 coordtype:坐标的类型 bd09ll( ...
- php百度地图接口两点测距,百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...
- js 根据百度地图提供经纬度计算两点距离
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,p ...
- 天气 经纬度 高德_天地图与高德 百度地图的经纬度转换
https://lbs.amap.com/api/javascript-api/guide/transform/convertfrom http://m.gpsspg.com/maps.htm 1.首 ...
- 百度地图根据经纬度计算距离php,详解js根据百度地图提供经纬度计算两点距离...
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,p ...
- 百度地图调用加载显示Marker,并添加点击事件
百度地图调用加载显示Marker,并添加点击事件 注册百度开发者账号,申请应用AK 百度地图开发平台官网 点击右上角控制台,选择创建应用 创建应用,勾选浏览器端,白名单填写* 注:如上线更改为公网IP ...
- 百度android api坐标转地址,百度API从经纬度坐标到地址的转换服务
/// /// 百度API从经纬度坐标到地址的转换服务 /// /// /// /// public string GetAddress(string lng, string lat) { strin ...
- Android百度地图定位APP,显示出当前位置坐标
Android百度地图定位APP,显示出当前位置坐标 官网配置百度地图 通过CMD命令获取SHA1 在百度的官网里面创建一个应用 Android配置 显示地图即定位 配置 AndroidManifes ...
最新文章
- Ant Design Pro 登录流程以及路由权限设置
- 产销平衡的运输问题上机实验matlab_MATLAB实验上机练习(三)
- python程序员工作怎样-12个Python程序员面试必备问题与答案(小结)
- AlarmManager深入浅出
- Install vsftpd on centos
- html overflow隐藏滚动条,css 之内容溢出滚动,隐藏滚动条
- 前驱和后驱什么意思_14.98万!造型酷似“保时捷”,后置后驱续航510,这款SUV要火...
- python函数示例_带Python示例的complex()函数
- 【python】去除字符串头尾的多余符号
- 制作和unity调用动态链接库dll文件
- sublime text 3 插件推荐?
- 华中科技大学计算机系统基础实验3报告,华中科技大学计算机系统基础实验报告.doc...
- 找不到minidump.dmp文件
- 1.4 px30驱动移植-网卡驱动找不到网卡解决
- 面包板入门制作之三极管详解
- OROCOS之KDl库在Linux系统下安装学习记录:01
- 菜鸟进阶黑客知识整合大全(1)
- Android开发文件上传格式,(android开发)使用okhttp上传文件
- Distantly Supervised Named Entity Recognition using Positive-Unlabeled Learning(DS——NER识别(减少人工参与))
- 现在为什么很多企业都在使用终端安全管理系统?有什么好处...
热门文章
- sqlyog连接mysql错误码2058 正确处理方式
- AI前沿论坛会议—文字智能和游戏智能总结篇
- shell-脚本入门
- 移动端电影院社交来啦 约上ta看一场电影
- excel如何用超链接直接打开文件
- 幸运童年童装 研发制造营销
- Model和ModelMap的关系
- Rest请求使用Jackson反序列化报错,Cannot deserialize instance of `java.lang.String` out of START_OBJECT toke
- 2020-10-22 css画八边形等
- 如何在 Python 中构建跨平台桌面应用程序