百度地图添加轨迹回显
<!DOCTYPE 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,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
	<script src="../js/jquery-3.1.1.min.js"></script>
    <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>

	<!--需换成你的百度key-->
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2EAB3GMXnePj17IuG1qc5LuXDamUbGGq"></script>
    <title>百度地图轨迹展示</title>
</head>
<body>
	<div id="map"></div>
</body>
</html>
<script type="text/javascript">

    /**
     * 获得本页面地址栏参数
     * 用法:getUrlAddressParameter("name")
     * @param parameter
     * @returns {*}
     */
    function getUrlAddressParameter(parameter){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == parameter){return pair[1];}
        }
        return null;
    }


    /*高德地图x,y转百度地图x,y*/
    function gaoDeToBaidu(gd_lon,gd_lat) {
        var bd_lat_lon = [];
        var PI = 3.14159265358979324 * 3000.0 / 180.0;
        var x = gd_lon, y = gd_lat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * PI);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * PI);
        bd_lat_lon[0] = z * Math.cos(theta) + 0.0065;
        bd_lat_lon[1] = z * Math.sin(theta) + 0.006;
        return bd_lat_lon;
    }

    var RWATID = getUrlAddressParameter("RWATID")

    var a = gaoDeToBaidu("116.36429189020159","40.05555264594683")
    var b = gaoDeToBaidu("116.36427962852255","40.05556254729755")
    var c = gaoDeToBaidu("116.36436857802101","40.05542719892277")
    var d = gaoDeToBaidu("116.36447273920747","40.05499052717033")
    var e = gaoDeToBaidu("116.36460265198868","40.05458766729766")
    var f = gaoDeToBaidu("116.36470499824509","40.05422657652283")
    var g = gaoDeToBaidu("116.36481109116102","40.05378289676395")

	var map = new BMapGL.Map("map");
    map.centerAndZoom(new BMapGL.Point(116.37546,40.067035), 17);
    map.enableScrollWheelZoom(true);
    var path = [

        {
			'lng': a[0],
			'lat': a[1]
    	}, {
			'lng': b[0],
			'lat': b[1]
    	}, {
    		'lng': c[0],
    		'lat':c[1]
    	}, {
    		'lng': d[0],
    		'lat':d[1]
    	}, {
    		'lng': e[0],
    		'lat':e[1]
    	}, {
    		'lng': f[0],
    		'lat':f[1]
    	}, {
    		'lng': g[0],
    		'lat':g[1]
    	}
	];
	

    //开始
	var startMarker = new BMapGL.Marker(new BMapGL.Point(a[0],a[1]), {
		icon: new BMapGL.Icon("../images/start.png", new BMapGL.Size(35, 56))
	});
    map.addOverlay(startMarker);
	

	//结束
	var stopMarker = new BMapGL.Marker(new BMapGL.Point(g[0],g[1]), {
		icon: new BMapGL.Icon("../images/stop.png", new BMapGL.Size(37, 56)),
	});
    map.addOverlay(stopMarker);
	
	

    //设备id
	var sbIcon = new BMapGL.Icon("../images/sb.png", new BMapGL.Size(30, 30));
	var marker = new BMapGL.Marker(new BMapGL.Point(c[0],c[1]), {
		icon: sbIcon
	});
	// 将标注添加到地图
    map.addOverlay(marker);
	

	
	
	
	
    var point = [];
    for (var i = 0; i < path.length; i++) {
        point.push(new BMapGL.Point(path[i].lng, path[i].lat));
    }
    var pl = new BMapGL.Polyline(point);
	
	
	
	setTimeout(function (){
		start()
	},3000)

    function start () {
        trackAni.start();
    }
    function stop () {
	    trackAni.cancel();
    }
    trackAni = new BMapGLLib.TrackAnimation(map, pl, {
        overallView: true,
        tilt: 50,
        duration: 20000,
        delay: 300
    });
</script>

评论

  1. Tongyao
    1月前
    2021-5-21 17:18:18

    aaa

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇