调用百度地图API实现动态走航路线图

最新推荐文章于 2024-11-25 11:18:48 发布

Yubo Huang

最新推荐文章于 2024-11-25 11:18:48 发布

阅读量4.5k

点赞数 3

文章标签：百度地图API 走航路线图

本文链接：https://blog.csdn.net/xs463/article/details/89383847

版权

一、先上效果图

马里奥会动态的从广州之窗走到沥滘地铁站，绿色的线是走航路线图。
在这里插入图片描述

二、编写HTML和JavaScript脚本实现

运行需要浏览器端的AK，可以去百度地图开放平台免费申请。

<!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, #allmap{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=你的AK"></script>
	<title>走航轨迹测试</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var startLong = 113.319559; // 开始时的经度
	var startLat = 23.060046; // 开始时的纬度
	var endLong = 113.319559;
	var endLat = 23.060046;
	
	var latData = new Array(23.060046, 23.060541, 23.060678, 23.060674, 23.060686, 23.060715, 23.060707, 23.060744, 23.060757, 23.060707, 23.060711, 23.060715, 23.060732, 23.060641, 23.060549, 23.060587, 23.060582, 23.060587, 23.060557, 23.060528, 23.060728);
	var longData = new Array(113.319559, 113.319703, 113.319761, 113.320022, 113.320368, 113.320597, 113.320956, 113.321531, 113.322052, 113.322447, 113.322887, 113.323197, 113.323606, 113.323857, 113.324122, 113.324419, 113.324711, 113.324980, 113.325268, 113.325501, 113.325668);
	var iter = 0;
	
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(113.319559,23.060046), 18);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.setCurrentCity("广州");          // 设置地图显示的城市
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	setInterval(goWay,800); // 0.8秒画一次线
	
	var carMk;
	var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//马里奥
	
	function goWay(){
		iter = iter + 1;
		if (iter < latData.length){
			startLat = endLat;
			startLong = endLong;
			endLong = longData[iter]; // 读取经纬度
	        endLat  = latData[iter];
			drawIcon(startLong,startLat,endLong,endLat);
		}else{
			pass;
		}
	}
   
    function drawGreenLine(startLong,startLat,endLong,endLat){
	    var polyline = new BMap.Polyline([
											new BMap.Point(startLong,startLat),//起始点的经纬度
		                                    new BMap.Point(endLong,endLat)//终止点的经纬度
		                                    ], {strokeColor:"forestgreen",//设置颜色 
		                                    strokeWeight:5, //宽度
		                                    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);
    }
</script>