百度地图API-自定义Lushu

来源：互联网发布：rite in the rain淘宝编辑：程序博客网时间：2024/04/29 06:42
多点沿线运动的小车可以保持车头沿路的方向

1、引入相关的文件
2、定义一个div 容器
<div id="map" class="map"></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