百度地图在实际运用非常广泛，本文使用百度地图jsapi模拟实现台风的登陆轨迹，同时介绍如何使用百度地图JavascriptAPi。
工具/原料
vs2015
百度地图JavaScriptAPI
方法/步骤
1、首先，需要注册百度地图开放平台，然后登陆控制台，申请ak秘钥。
2、使用vs2015创建html页面，将百度地图JavaScriptAPI引入页面。此处请注意，ak为注册开放平台申请的ak。<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=igKR7HodsfsfsfGlByLMHIj"></script>
3、在页面声明一个div容器，用来实例化百度地图。<divid="allmap"style="width:100%;height:100%;position:absolute;"></div>
4、编写js方法，实例化百度地图。//百度地图API功能varmap=ne嘛术铹砾wBMap.Map("allmap");va鸡堕樱陨roldply;//自定义百度地图样式map.setMapStyle({styleJson:[{"featureType":"poi","elementType":"all","stylers":{"color":"#ffffff","visibility":"off"}},{"featureType":"road","elementType":"all","stylers":{"color":"#ffffff","visibility":"off"}},{"featureType":"background","elementType":"all","stylers":{"color":"#ffffff"}},{"featureType":"administrative","elementType":"all","stylers":{"color":"#ffffff","visibility":"off"}}]});map.centerAndZoom(newBMap.Point(116.403765,34.914850),5);map.enableScrollWheelZoom();map.disableDoubleClickZoom();
5、添加模拟点生成方法，具体如下：functionaddC艺皱麾酪ottonLayout(text){if(lays!=null)惺绅寨瞀{$.each(lays,function(index){map.removeOverlay(lays[index]);});}varpath;if(text=="2015年20号台风（彩虹）"){path=[[121.1,15.8],[120.5,15.9],[120,16.1],[119.6,16.5],[119.3,16.7],[119,16.7],[118.9,16.7],[118.9,16.7],[118.8,16.7],[118.5,16.7],[118.4,16.9],[118.1,16.9],[117.9,16.9],[117.9,17.1],[117.7,17.1],[117.5,17.2],[117.1,17.2],[116.9,17.4],[116.7,17.6],[116.5,17.8],[116.3,18.0],[116.2,18.0],[116.2,18.0],[116.1,18.2],[115.9,18.4],[115.7,18.5],[116.1,18.2],[115.2,18.7],[115.0,18.7],[114.7,18.7],[114.6,18.8],[114.3,18.9],[114.3,18.9],[114.2,19.0],[114.0,19.1],[113.9,19.2],[113.7,19.3],[113.5,19.4],[113.2,19.5],[113.0,19.5],[112.8,19.6],[112.6,19.7],[112.4,19.7],[112.3,19.8],[112.1,19.9],[112.0,20.0],[111.9,20.1],[111.8,20.2],[111.7,20.3],[111.6,20.4],[111.4,20.5],[111.2,20.7],[111.0,20.9],[110.8,21.0],[110.6,20.1],[110.5,20.1],[110.3,21.3],[110.2,21.4],[110.0,21.5],[109.8,21.7],[109.7,21.8],[109.6,21.8],[109.5,21.9],[109.3,22.1],[109.2,22.2],[109.1,22.3],[109.0,22.4],[108.8,22.6],[108.7,22.8],[108.7,22.9],[108.6,23.1],[108.6,23.1],[108.4,23.1],[108.3,23.2],[108.1,23.5]];drawPath(path);}elseif(text=="2015年19号台风（杜鹃）"){path=[[138.2,17.7],[136.7,17.7],[135.9,19.2],[134.7,18.7],[133.9,19],[133.2,18.9],[133,18.8],[132.2,18.9],[132.1,18.9],[132.1,19],[132.1,19.1],[132.1,19.4],[132,19.5],[134.7,19.5],[131.7,19.8],[131.1,19.9],[130.9,19.9],[130.9,20.2],[130.8,20.9],[130.3,20.9],[130,21.2],[129.7,21.6],[129.4,22.1],[128.9,22],[128.5,22.1],[128.2,22.2],[128,22.3],[127.6,22.3],[127.2,22.3],[126.9,22.4],[126.7,22.5],[126.6,22.6],[126.3,22.7],[126.2,22.7],[126.1,22.8],[125.9,22.8],[125.8,22.8],[125.6,22.8],[125.4,22.8],[125.2,22.8],[125.1,22.9],[125,23],[124.8,23],[124.6,23.1],[124.5,23.1],[124.3,23.2],[124.2,23.3],[123.8,23.4],[123.6,23.5],[123.5,23.6],[123.2,23.8],[123,23.9],[122.8,24.1],[122.5,24.3],[122.2,24.3],[121.7,24.3],[121.5,24.2],[121.4,24],[121.4,24.1],[121,24.1],[120.7,24.1],[120.6,24.2],[120.3,24.2],[120.2,24.2],[120.2,24.2],[120.1,24.3],[119.8,24.5],[119.7,24.6],[119.6,24.8],[119.4,25],[119.1,25.1],[118.9,25.2],[118.6,25.3],[118.3,25.4],[118,25.4],[117.6,25.5],[117.2,25.5],[116.9,25.7],[116.7,25.9]];drawPath(path);}elseif(text=="2015年13号台风（苏迪罗）"){path=[[159.2,13.6],[158.8,13.7],[158.5,13.6],[156.9,13.3],[155.9,13.4],[154.8,13.4],[153.5,13.6],[150.8,14.3],[149.5,14.5],[148.2,14.6],[146.7,14.9],[145.9,15.2],[144.9,15.6],[144,16.2],[143,16.9],[141.8,17.4],[140.7,17.8],[139.6,18.3],[138.3,18.6],[137.2,18.9],[136.2,19.3],[134.9,19.6],[133.8,20],[132.6,20.1],[131.9,20.1],[131.5,20.1],[130.9,20.5],[130.2,20.5],[129.8,20.6],[129.2,20.9],[128.7,20.9],[128.2,21.2],[127.4,21.3],[127,21.5],[126.4,21.7],[126.3,21.7],[126.1,21.7],[125.8,21.8],[125.6,21.9],[125.5,22],[125.3,22.1],[125.2,22.1],[125.1,22.2],[124.8,22.3],[124.7,22.4],[124.5,22.5],[124.3,22.6],[124.2,22.7],[124.1,22.8],[123.9,22.9],[123.7,23],[123.5,23.1],[123.3,23.2],[123.1,23.3],[122.9,23.4],[122.7,23.6],[122.3,23.8],[122,24],[121.5,24.2],[121.2,24.2],[120.6,23.8],[120.4,23.7],[120.3,23.6],[120.2,23.6],[120,23.5],[120,23.7],[120,23.7],[119.8,23.8],[119.7,24],[119.6,24.1],[119.6,24.2],[119.6,24.4],[119.5,24.6],[119.5,24.8],[119.5,24.9],[119.2,25.1],[119,25.1],[118.9,25.2],[118.7,25.3],[118.4,25.4],[118.3,25.4],[118.1,25.5],[117.9,25.6],[117.8,25.7],[117.6,25.9],[117.4,25.9],[117.4,26],[117.3,26.1],[117.1,26.4],[116.9,26.6],[116.9,26.7],[116.8,26.8],[116.6,26.9],[116.6,27],[116.5,27.1],[116.4,27.3],[116.4,27.5],[116.3,27.7],[116.2,27.9],[116.1,28.1],[116,28.3],[115.9,28.6],[116,29.5],[116.1,29.6],[116.1,29.8],[116.4,30.8]];drawPath(path);}}
6、编写点与点之间的线条生成方法，生成台风各时段登录点及线路functiondrawPath(obj){playBtn=$("#btnPlay");index=0;points.length=0;map.setZoom(7);$(obj).each(function(index){try{varpoint=newBMap.Point(obj[index][0],obj[index][1]);points.push(point);//alert(index);varmyIcon=newBMap.Icon("images/t-04.png",newBMap.Size(12,12));varmarker=newBMap.Marker(point,{icon:myIcon});map.addOverlay(marker);lays.push(marker);}catch(e){alert(e.message);}});varpolyline=newBMap.Polyline(points,{strokeColor:"#ff6319",strokeWeight:2,strokeOpacity:0.5});//定义折线map.addOverlay(polyline);lays.push(polyline);centerPoint=newBMap.Point((points[0].lng+points[points.length-1].lng)/2,(points[0].lat+points[points.length-1].lat)/2);map.panTo(centerPoint);//点亮操作按钮playBtn.removeAttr("disabled");}
7、添加轨迹播放功能，此处使用一个按钮来控制播放functi艺皱麾酪onplay(){varpoint=points[index]稆糨孝汶;if(index==0){if(lays!=null){$.each(lays,function(index){map.removeOverlay(lays[index]);});}varcarIcon=newBMap.Icon("images/typhoon.gif",newBMap.Size(40,40));car=newBMap.Marker(point,{icon:carIcon});map.addOverlay(car);lays.push(car);}playBtn.attr("disabled","disabled");car.setPosition(point);varmyIcon=newBMap.Icon("images/t-04.png",newBMap.Size(12,12));if(index>10&&index<18){myIcon=newBMap.Icon("images/t-05.png",newBMap.Size(12,12));}if(index>10&&index<18){myIcon=newBMap.Icon("images/t-06.png",newBMap.Size(12,12));}if(index>18&&index<22){myIcon=newBMap.Icon("images/t-01.png",newBMap.Size(12,12));}if(index>22&&index<26){myIcon=newBMap.Icon("images/t-02.png",newBMap.Size(12,12));}varmarker=newBMap.Marker(point,{icon:myIcon});map.addOverlay(marker);lays.push(marker);if(index>0){varpolyline=newBMap.Polyline([points[index-1],point],{strokeColor:"#ff6319",strokeWeight:2,strokeOpacity:0.5});//定义折线map.addOverlay(polyline);lays.push(polyline);}index++;if(index<points.length){timer=window.setTimeout("play("+index+")",interval);}else{playBtn.removeAttr("disabled");map.panTo(point);index=0;}}
8、此致，所有的代码已编写完成，最终效果如图.图1为生成的线路图，图2为播放时的轨迹显示。
