1、首先，需要注册百度地图开放平台，然后登陆控制台，申请ak秘钥。
2、使用vs2015创建html页面，将百度地图JavaScript API引入页面。此处请注意，ak为注册开放平台申请的ak。<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=igKR7HodsfsfsfGlByLMHIj"></script>
3、在页面声明一个div容器，用来实例化百度地图。<div id="allmap" style="width: 100%; height: 100%; position: absolute;"></div>
4、编写js方法，实例化百度地图。// 百度地图API功能var map = ne嘛术铹砾w BMap.Map("allmap");var oldply;//自定义百度地图样式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(new BMap.Point(116.403765, 34.914850), 5);map.enableScrollWheelZoom();map.disableDoubleClickZoom();
5、添加模拟点生成方法，具体如下：function addCottonLayout(text) {if (lays != null) {$.each(lays, function (index) {map.removeOverlay(lays[index]);});}var path;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);}else if (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);}else if (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、编写点与点之间的线条生成方法，生成台风各时段登录点及线路function drawPath(obj) {playBtn = $("#btnPlay");index = 0;points.length = 0;map.setZoom(7);$(obj).each(function (index) {try {var point = new BMap.Point(obj[index][0], obj[index][1]);points.push(point);// alert(index);var myIcon = new BMap.Icon("images/t-04.png", new BMap.Size(12, 12));var marker = new BMap.Marker(point, { icon: myIcon });map.addOverlay(marker);lays.push(marker);} catch (e) {alert(e.message);}});var polyline = new BMap.Polyline(points, { strokeColor: "#ff6319", strokeWeight: 2, strokeOpacity: 0.5 }); //定义折线map.addOverlay(polyline);lays.push(polyline);centerPoint = new BMap.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、添加轨迹播放功能，此处使用一个按钮来控制播放function play() {var point = points[index]稆糨孝汶;if (index == 0) {if (lays != null) {$.each(lays, function (index) {map.removeOverlay(lays[index]);});}var carIcon = new BMap.Icon("images/typhoon.gif", new BMap.Size(40, 40));car = new BMap.Marker(point, { icon: carIcon });map.addOverlay(car);lays.push(car);}playBtn.attr("disabled", "disabled");car.setPosition(point);var myIcon = new BMap.Icon("images/t-04.png", new BMap.Size(12, 12));if (index > 10 && index < 18) {myIcon = new BMap.Icon("images/t-05.png", new BMap.Size(12, 12));}if (index > 10 && index < 18) {myIcon = new BMap.Icon("images/t-06.png", new BMap.Size(12, 12));}if (index > 18 && index < 22) {myIcon = new BMap.Icon("images/t-01.png", new BMap.Size(12, 12));}if (index > 22 && index < 26) {myIcon = new BMap.Icon("images/t-02.png", new BMap.Size(12, 12));}var marker = new BMap.Marker(point, { icon: myIcon });map.addOverlay(marker);lays.push(marker);if (index > 0) {var polyline = new BMap.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为播放时的轨迹显示。
