小车沿经纬度轨迹运动

最新推荐文章于 2024-03-26 13:25:28 发布

来自外太空的测试人

最新推荐文章于 2024-03-26 13:25:28 发布

阅读量1.5k

点赞数 2

分类专栏：代码开发文章标签： JS 百度地图行车轨迹

本文链接：https://blog.csdn.net/shunzi2588187/article/details/82929413

版权

代码开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

废话不多说，直接上代码，支持单击获取经纬度，小车绘制轨迹。

<pre name="code" class="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: 104.5%;height: 100%;overflow:-10;hidden;margin:-50;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zGLX8MsFI5RMwsqTSrpebyMHMGgpoXjS"></script>
	<title>车辆运行轨迹</title>
<script src="http://c.cnzz.com/core.php"></script></head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var list = [{Long:108.887081004,Lat:34.1722363591},{}] //经纬度以字典的形式输入
	
	var listLast = list.length-1;
	var a =0;
	var b =0;
	var linesPoints = null;
	var map = new BMap.Map("allmap");    
	map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 13);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());  
	map.setCurrentCity("西安");          
	map.enableScrollWheelZoom(true);     
   
   setInterval(goWay,1);
   var carMk;
   var myIcon = new BMap.Icon("http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});
   var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});
   var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});
   
   function goWay(){
	   startLong = list[a].Long;
	   startLat = list[b].Lat;
	   endLong = getLong();
	   endLat = getLat();
	   drawIcon(startLong,startLat,endLong,endLat);
   }
   
   function getLong(){
	   a++;
	   return list[a].Long;
   }
   
   function getLat(){
	   b++;
	   return list[b].Lat;
   }
   
    function drawGreenLine(startLong,startLat,endLong,endLat){
	   var polyline = new BMap.Polyline([
		                                  new BMap.Point(startLong,startLat),
		                                  new BMap.Point(endLong,endLat)
		                                  ], {strokeColor:"blue", 
		                                  strokeWeight:4, 
		                                  strokeOpacity:1});
	   map.addOverlay(polyline);
   }

   function drawIcon(startLong,startLat,endLong,endLat){
	   if(carMk){
		   map.removeOverlay(carMk);
	   }
	   carMk = new BMap.Marker(
	               new BMap.Point(endLong,endLat),
	              {icon:myIcon});
	   map.addOverlay(carMk);
	   drawGreenLine(startLong,startLat,endLong,endLat);
	   
	   carMk2 = new BMap.Marker(
                new BMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度
                {icon:myBeginIcon});
        map.addOverlay(carMk2);

        carMk3 = new BMap.Marker(
                new BMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度
                {icon:myEndIcon});
        map.addOverlay(carMk3);
   }
   
   function showInfo(e){
		alert("经度:"+e.point.lng + ", 维度:" + e.point.lat);
	}
	map.addEventListener("click", showInfo);
	
</script>

ak换成你的百度密钥，当经纬度数据量过大时候，页面刚开始会卡一些，不建议总里程超过10公里绘制小车轨迹，若只是记录行车轨迹可以把小车去除掉！这样无所谓多长距离，代码如下:

<pre name="code" class="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 {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #allmap {position:absolute;left:0px;width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zGLX8MsFI5RMwsqTSrpebyMHMGgpoXjS"></script>
    <title>车辆运行轨迹</title>
    <script src="http://c.cnzz.com/core.php"></script></head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var list = [{Long:108.887081004,Lat:34.1722363591},{}] //经纬度以字典的形式输入
	
    var listLast = list.length-1;
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(list[0].Long,list[0].Lat), 12);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    setTimeout(drawIcon,500);
    var carMk;
    var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
    var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人

    function drawGreenLine(i){
        var polyline = new BMap.Polyline([
            new BMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度
            new BMap.Point(list[i+1].Long,list[i+1].Lat)//终点的经纬度
        ], {strokeColor:"blue",//设置颜色
            strokeWeight:4, //宽度
            strokeOpacity:5});//透明度
        map.addOverlay(polyline);
    }

    function drawIcon(){
        if(carMk){
            map.removeOverlay(carMk);
        }
        carMk2 = new BMap.Marker(
                new BMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度
                {icon:myBeginIcon});
        map.addOverlay(carMk2);

        carMk = new BMap.Marker(
                new BMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度
                {icon:myEndIcon});
        map.addOverlay(carMk);

        for(var i=0;i<list.length-1;i++){
            drawGreenLine(i);
        }

    }
</script>

来自外太空的测试人

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
小车沿经纬度轨迹运动

废话不多说，直接上代码，支持单击获取经纬度，小车绘制轨迹。&amp;lt;pre name=&quot;code&quot; class=&quot;html&quot;&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&
复制链接

扫一扫

专栏目录