<!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>
10-20 06:23