多点沿线运动的小车可以保持车头沿路的方向

最新推荐文章于 2024-05-20 22:24:53 发布

作泥

最新推荐文章于 2024-05-20 22:24:53 发布

阅读量163

点赞数

分类专栏： js效果

本文链接：https://blog.csdn.net/weixin_37787674/article/details/118406309

版权

js效果专栏收录该内容

52 篇文章 2 订阅

订阅专栏

多点沿线运动的小车可以保持车头沿路的方向
1、引入相关的文件
2、定义一个div 容器

3、代码：

<%@page import="java.util.ArrayList,com.bean.Client"%>
<%@ page language="java" import="java.lang.Math"
    contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>MorePointToLushu</title>
<link rel="stylesheet" type="text/css" href="css/map.css">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css" />
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-slide.min.js"></script>
<script type="text/javascript"
    src="jquery/jquery-ui-timepicker-addon.js"></script>

<script
    src="http://api.map.baidu.com/api?v=2.0&ak=srpbYTidksiwvfrsfXa8IHfk"></script>
<script type="text/javascript"
    src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-slide.min.js"></script>
<script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>

<%
    Client u = (Client) session.getAttribute("client");
%>
</head>
<body>
    <!--地图部分  -->
    <div id="map" class="map"></div>
</body>
</html>

<script type="text/javascript">
    var carTrackAll = new Array();
    var map = new BMap.Map('map');
    map.enableScrollWheelZoom();
    map.centerAndZoom(new BMap.Point(116.49, 39.88423), 13);

    var myIcon = new BMap.Icon("car2.png", new BMap.Size(13, 26), {    //小车图片
        //offset: new BMap.Size(0, -5),    //相当于CSS精灵
        imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
      });
    addLine(116.489997, 39.880001, 116.499997, 39.880001, 10,"京A00001");

    function addLine(x1, y1, x2, y2, t,_carid) {
        var start_point = new BMap.Point(x1, y1);
        var end_point = new BMap.Point(x2, y2);
        time = t;
        var driving3 = new BMap.DrivingRoute(map, {
            onSearchComplete : drawLine
        });
        driving3.search(start_point, end_point, {}); //发起检索。
    }
    function drawLine(results) {//results类型：Drivin gRouteResult
        var planObj = results.getPlan(0);
        //返回索引指定的方案。索引0表示第一条方案。
        //planObj为RoutePlan类:此类表示一条驾车或步行出行方案
        // 绘制驾车步行线路
        for (var i = 0; i < planObj.getNumRoutes(); i++) {//RoutePlan.getNumRoutes()返回方案包含的线路的个数
            var route = planObj.getRoute(0);//返回方案中索引指定的线路。索引0表示第一条线路,route为Route类:此类表示一条驾车或步行路线。
            if (route.getDistance(false) <= 0) {
                continue;
            }//返回路线距离，当format为false时仅返回数值
            run(route.getPath());
        }
    }
    //找到每一次小车运动，需要偏移的角度
    function findRotation(startPoint,endPoint){
        var x = endPoint.lng-startPoint.lng;//lng-经度，lat-纬度
        var y = endPoint.lat-startPoint.lat;
        if(x==0){
            return 0;
        }
        if(x>0){
            var z=Math.sqrt(x*x+y*y);
            var jiaodu=Math.round((Math.asin(y/z)/Math.PI*180));//最终角度
            if(jiaodu>=0){
                return 90-jiaodu;
            }else{
                return 90+Math.abs(jiaodu);
            }
        }
        if(x<0){
            var z=Math.sqrt(x*x+y*y);
            var jiaodu=Math.round((Math.asin(y/z)/Math.PI*180));//最终角度
            if(jiaodu>=0){
                return 270+jiaodu;
            }else{
                return 270-Math.abs(jiaodu);
            }
        }

    }
    //小车的运动过程
    function run(pts){
        var paths = pts.length;    //获得有几个点
        var carMk = new BMap.Marker(pts[0],{icon:myIcon});
        var label = new BMap.Label("", {
            offset : new BMap.Size(20, -10)
        });
        label.setTitle("京A00001");
        carMk.setLabel(label);
        map.addOverlay(carMk);
        i=0;
         function resetMkPoint(i){
            if(i<paths-1){
                console.log(findRotation(pts[i],pts[i+1]));
                //var rotationed=carMk.getRotation();//该点已经旋转的角度
                carMk.setRotation(findRotation(pts[i],pts[i+1]));//设置旋转角度
            }
            carMk.setPosition(pts[i]);
            if(i < paths){
                setTimeout(function(){
                    i++;
                    resetMkPoint(i);
                },100);//修改时间间隔100，能控制小车跑完全程所用的时间。
            }
        }
        setTimeout(function(){
            resetMkPoint(0);
        },5000) //setTimeout；延时
    }

</script>

作泥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多点沿线运动的小车可以保持车头沿路的方向

多点沿线运动的小车可以保持车头沿路的方向1、引入相关的文件2、定义一个div 容器3、代码：<%@page import="java.util.ArrayList,com.bean.Client"%><%@ page language="java" import="java.lang.Math" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLI
复制链接

扫一扫