<!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 src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script> <title>走航轨迹测试</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> var startLong = 111.149396; // 开始时的经度 var startLat = 27.485042; // 开始时的纬度 var endLong = 111.149396; var endLat = 27.485042; var latData = new Array(27.662692,27.485743,27.486456,27.486676,27.48934,27.491936,27.512411,27.52191,27.532354,27.531649,27.536358,27.544237,27.549074,27.553061,27.554727,27.558554); var longData = new Array(111.166895,111.149472,111.149445,111.149333,111.147339,111.148632,111.123785,111.104562,111.094716,111.10104,111.111029,111.117605,111.121629,111.123336,111.126319,111.127486); var iter = 0; // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(111.149863,27.485358), 18); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("高坪汽车站"); // 设置地图显示的城市 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 setInterval(goWay,2000); // 0.8秒画一次线 setInterval(getLocation,2000); // 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); } /*******************************************************************自动获取手机经纬度************************************************************************************8*/ function getLocation(){ var options={ enableHighAccuracy:true, maximumAge:1000 } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); }else{ //浏览器不支持geolocation alert('您的浏览器不支持地理位置定位'); } } //成功时 function onSuccess(position){ //返回用户位置 //经度 var longitude =position.coords.longitude; //纬度 var latitude = position.coords.latitude; alert('经度'+longitude+',纬度'+latitude); //根据经纬度获取地理位置,不太准确,获取城市区域还是可以的 var map = new BMap.Map("allmap"); var point = new BMap.Point(longitude,latitude); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); } //失败时 function onError(error){ switch(error.code){ case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } } </script>