百度地圖根據經緯度獲取運動軌跡

時間 2019-11-10
標籤百度地圖根據經緯度獲取運動軌跡简体版
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。