手機版的百度map封裝,使用gps定位

時間 2019-11-18
標籤手機百度 map 封裝使用 gps 定位欄目軟件設計简体版
原文原文鏈接
代碼以下,包本身引javascript
包參考css
一個百度MAP導航的基礎封裝

使用的是瀏覽器調用gps定位html
修改了標註的大小java
效果如圖:git
代碼......api
<!DOCTYPE html>
<html>
<head>
<title>map-index.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no" />
<style type="text/css">
.anchorBL {
    display: none;
}

#map-page-in .btn {
    font-size: 27px;
}
</style>
</head>
<body>
    <div id='map-page-in' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'>
        <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='border:1px solid #bbbbbb;box-shadow: 2px 2px 2px #aaaaaa'>
            <!-- 地圖 -->
            <div id="map" style="height:900px" class='col-lg-12 col-md-12 col-sm-12 col-xs-12'></div>
            <!-- 搜索控件 -->
            <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='position:absolute;padding:5px 20px 0px 40px;top:0px'>
                <!-- 關閉按鈕 -->
                <!-- <div style='position:absolute;top:7px;left:2px'>
                    <button class='btn btn-primary btn-lg' onclick="removeAll();$('#map-page').hide(300)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div> -->
                <input id='search-input' type="text" class="form-control" style='height:65px;border-color:green'>
                <div style='position:absolute;top:10px;right:30px;'>
                    <button id='search-location-btn' class='btn btn-success btn-lg' onclick='locationSearch("map")'>
                        <span class="glyphicon glyphicon-search"></span> 搜索
                    </button>
                    <button class='btn btn-primary btn-lg' title='本身到目標的步行或騎行路線規劃' onclick='goTo("walk")'>步/騎</button>
                    <button class='btn btn-primary btn-lg' title='本身到目標的公交路線規劃' onclick='goTo("bus")'>公交</button>
                    <button class='btn btn-primary btn-lg' title='本身到目標的自駕車路線規劃' onclick='goTo("car")'>駕車</button>
                </div>
            </div>
            <!-- 地圖類型切換按鈕 -->
            <div style='position:absolute;top:75px;right:25px'>
                <button class='btn btn-primary btn-lg' onclick="switchMap()" title='切換地圖顯示'>
                    <span class="glyphicon glyphicon-globe"></span>
                </button>
            </div>
            <!-- 標記自身 -->
            <div style='position: absolute;left:5px;bottom:5px'>
                <button class='btn btn-success btn-lg' title='刷新本身的定位' onclick='myLocationClick()'>
                    <span class="glyphicon glyphicon-screenshot"></span> 我
                </button>
                <button class='btn btn-warning btn-lg' onclick='removeAll()'>
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </div>
            <!-- 自定義路線開啓關閉 -->
            <div style='position: absolute;right:5px;bottom:5px'>
                <button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("walk")'>步/騎路線</button>
                <button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("bus")'>公交路線</button>
                <button style='display:none' class='customline btn btn-info btn-lg' onclick='myLine("car")'>駕車路線</button>
                <button id='customLine' class='btn btn-success btn-lg' onclick='customLine()'>自定義路線開啓</button>
            </div>
            <!-- 調用百度地圖html或app導航連接按鈕 -->
            <div style='position: absolute;right:5px;bottom:75px'>
                <button id='nav-baidu' style='display:none' class='customline btn btn-info btn-lg' onclick='navToBaidu()'>百度APP導航</button>
            </div>
        </div>
    </div>
    <!-- 路線規劃結果 -->
    <div id='line-result' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:10px'></div>
</body>
<script type="text/javascript">
    $(function() {
        $('#map').css('height', $(window).height() - 250 + 'px');


        initMap('map'); //加載頁面初始化map
    })

    //個人當前定位的緩存
    var mypoint = {
        point : {
            lat : null,
            lng : null,
        }
    };
    //地圖全局變量
    var map = null;
    //存入兩個座標點供自定義路線導航的棧
    var line = [];
    //單擊地圖的目標定位
    var target = null;

    /**
     * 地圖初始化函數
     */
    function initMap(id) {
        map = new BMap.Map(id); // 建立地圖實例
        map.centerAndZoom('北京', 14); //設置中心點
        map.enableScrollWheelZoom(true); //容許滾輪操做
        //map.disableDoubleClickZoom(); //關閉雙擊放大功能
        //map.enableKeyboard(); //開啓鍵盤操做功能

        //獲取當前定位位置
        myLocation();

        //添加單擊監聽事件
        map.addEventListener("click", function(e) { //獲取一個點的定位存入爲目標點
            target = e;
        });

        //搜索框回車鍵監聽
        $('#search-input').keydown(function(e) { //搜索框激活下按鍵盤迴車鍵執行搜索
            if (event.keyCode == 13) {
                $("#search-location-btn").click();
            }
        })
    }

    var mapType = 0; //三種地圖切換的標記
    function switchMap() {
        if (mapType == 0) {
            map.setMapType(BMAP_HYBRID_MAP); //衛星路網
            mapType = 1;
        } else if (mapType == 1) {
            map.setMapType(BMAP_SATELLITE_MAP); //衛星地圖
            mapType = 2;
        } else if (mapType == 2) {
            map.setMapType(BMAP_NORMAL_MAP); //普通地圖
            mapType = 0;
        }
    }


    /**
     * 自定義路線監聽開啓函數
     */
    customLineFlag = false; //自定義路線的開啓/關閉標記
    function customLine() {
        if (customLineFlag == false) { //開啓自定義路線
            //map.addEventListener("click", getLinePoint);
            map.addEventListener("touchend", getLinePoint);
            customLineFlag = true;
            $('#customLine').html('自定義路線開啓中');
            $('.customline').show();
        } else { //關閉自定義路線
            //map.removeEventListener("click", getLinePoint);
            map.removeEventListener("touchend", getLinePoint);
            customLineFlag = false;
            $('#customLine').html('自定義路線已關閉');
            $('.customline').hide();
        }
    }

    /**
     * 自定義路線監聽的回調函數
     */
    function getLinePoint(e) {
        if (line.length > 1) { //自定義路線的點有兩個
            line.splice(0, 1); //刪掉舊的
            line.push(e); //插入新點
        } else { //自定義路線的點不足兩個
            line.push(e); //插入新點
        }
        map.clearOverlays(); //清除當前標註


        for (var i = 0; i < line.length; i++) { //從新規劃標註
            var point = new BMap.Point(line[i].point.lng, line[i].point.lat);
            var label = new BMap.Label(i == 0 ? "起" : '終', { //標註上的文字
                offset : new BMap.Size(3, 3) //標註文字偏移到標註中心
            });
            label.setStyle({
                'border' : "none",
                'background' : 'none',
                'color' : 'white',
                'border-radius' : '10%',
                'width' : '50px',
                'height' : '50px',
                'font-size' : '25px',
            })
            addMarker(point, label); //添加標註
        }
    }

    /**
     * 從自身定位點到目標點的線路規劃
     */
    //lyhFloatTip2的相關代碼的連接爲:
    function goTo(key) {
        if (null == mypoint) { //自身定位未完成提示
            lyhFloatTip2("<span class='h3'>正在對本身位置進行定位,請稍後...</span>");
            return null;
        }
        if (null == target) { //沒有選擇目標點
            lyhFloatTip2("<span class='h3'>未點選目標位置!</span>");
            return null;
        }
        var start = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
        var end = new BMap.Point(target.point.lng, target.point.lat);
        removeAll();
        if (key == 'walk') { //徒步,騎行線路規劃
            var walking = new BMap.WalkingRoute(map, {
                renderOptions : {
                    map : map,
                    panel : "line-result", //結果顯示面板
                    autoViewport : true,
                }
            });
            walking.search(start, end); //執行搜索
        } else if (key == 'bus') { //公交線路規劃
            var transit = new BMap.TransitRoute(map, {
                renderOptions : {
                    map : map,
                    panel : "line-result", //結果顯示面板
                    autoViewport : true,
                },
            });
            transit.search(start, end); //執行搜索
        } else if (key == 'car') { //自駕車線路規劃
            var driving = new BMap.DrivingRoute(map, {
                renderOptions : {
                    map : map,
                    panel : "line-result", //結果顯示面板
                    autoViewport : true,
                }
            });
            driving.search(start, end); //執行搜索
        }
        $('#nav-baidu').show(300); //有線路規劃後,展現app按鈕,可直接進入百度app
    }

    /**
     * 跳轉到百度app或百度地圖導航的函數
     */
    function navToBaidu() {
        if (null == target) {
            lyhFloatTip2("請點擊地圖選擇要導航的目標位置...");
        } else {
            var lng = target.point.lng;
            var lat = target.point.lat;
            window.open("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //在新窗口打開鏈接
            console.log("http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=目的位置&output=html"); //打開的連接
        }
    }



    /**
     * 搜索目標位置函數
     */
    function locationSearch() {
        var val = $('#search-input').val();
        var local = new BMap.LocalSearch(map, {
            renderOptions : {
                map : map
            }
        });
        local.search(val); //以名稱搜索位置並顯示在地圖哄
    }


    /**
     * 定位到自身所在位置的函數
     */
    var mapLocationTimerCount = 0;
    function myLocation() {
        var pointGet = setInterval(function() {
            getLocation();
            if (mypoint.point.lat != null) {
                var point = new BMap.Point(mypoint.point.lng, mypoint.point.lat);
                var label = new BMap.Label('我', {
                    offset : new BMap.Size(3, 3)
                }); //生成本身的定位的標記
                label.setStyle({ //修改本身的定位的標記的樣式
                    'border' : "none",
                    'background' : 'none',
                    'color' : 'white',
                    'border-radius' : '50%',
                    'width' : '20px',
                    'height' : '20px',
                    'font-size' : '25px',
                })
                //$('#line-result').append(mypoint.point.lng + ' : ' + typeof mypoint.point.lng + ';<br>');
                //$('#line-result').append(mypoint.point.lat + ' : ' + typeof mypoint.point.lat + ';<br>');
                line = []; //初始化線路規劃
                line.push(mypoint); //存入當前自身定位
                addMarker(mypoint.point, label); //加載標註
                clearInterval(pointGet); //清除計時器
            }
        }, 1000)
    }

    function myLocationClick() {
        if (mypoint.point.lat != null) {
            map.panTo(mypoint.point); //將自身定位做爲地圖中心
        } else {
            lyhFloatTip2("<span class='h3'>定位中...</span>")
        }
    }


    //===
    function getLocation() {
        //判斷瀏覽器是否支持geolocation  
        if (navigator.geolocation) {
            // getCurrentPosition支持三個參數  
            // getSuccess是執行成功的回調函數  
            // getError是失敗的回調函數  
            // getOptions是一個對象，用於設置getCurrentPosition的參數  
            // 後兩個不是必要參數  
            var getOptions = {
                //是否使用高精度設備，如GPS。默認是true  
                enableHighAccuracy : true,
                //超時時間，單位毫秒，默認爲0  
                timeout : 45000,
                //使用設置時間內的緩存數據，單位毫秒  
                //默認爲0，即始終請求新數據  
                //如設爲Infinity，則始終使用緩存數據  
                maximumAge : 0
            };

            //成功回調  
            function getSuccess(position) {
                //$('#line-result').append(position.coords.latitude)
                // getCurrentPosition執行成功後，會把getSuccess傳一個position對象  
                // position有兩個屬性，coords和timeStamp  
                // timeStamp表示地理數據建立的時間？？？？？？  
                // coords是一個對象，包含了地理位置數據  
                console.log(position.timeStamp);
                // 估算的緯度  
                console.log(position.coords.latitude);
                mypoint.point.lat = position.coords.latitude;
                // 估算的經度  
                console.log(position.coords.longitude);
                mypoint.point.lng = position.coords.longitude;
                // 估算的高度 (以米爲單位的海拔值)  
                console.log(position.coords.altitude);
                // 所得經度和緯度的估算精度，以米爲單位  
                console.log(position.coords.accuracy);
                // 所得高度的估算精度，以米爲單位  
                console.log(position.coords.altitudeAccuracy);
                // 宿主設備的當前移動方向，以度爲單位，相對於正北方向順時針方向計算  
                console.log(position.coords.heading);
                // 設備的當前對地速度，以米/秒爲單位      
                console.log(position.coords.speed);
                // 除上述結果外，Firefox還提供了另一個屬性address  
                if (position.address) {
                    //經過address，能夠得到國家、省份、城市  
                    console.log(position.address.country);
                    console.log(position.address.province);
                    console.log(position.address.city);
                }
            }
            //失敗回調  
            function getError(error) {
                // 執行失敗的回調函數，會接受一個error對象做爲參數  
                // error擁有一個code屬性和三個常量屬性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE  
                // 執行失敗時，code屬性會指向三個常量中的一個，從而指明錯誤緣由  
                switch (error.code) {
                case error.TIMEOUT:
                    console.log('超時');
                    break;
                case error.PERMISSION_DENIED:
                    console.log('用戶拒絕提供地理位置');
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.log('地理位置不可用');
                    break;
                default:
                    break;
                }
            }

            navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);
            // watchPosition方法同樣能夠設置三個參數  
            // 使用方法和getCurrentPosition方法一致，只是執行效果不一樣。  
            // getCurrentPosition只執行一次  
            // watchPosition只要設備位置發生變化，就會執行  
            var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
            //clearwatch用於終止watchPosition方法  
            navigator.geolocation.clearWatch(watcher_id);
        }
    }


    //===

    /**
     * 繪製路線 徒步-騎行-公交-駕車
     */
    function myLine(key) {
        if (line.length < 2) { //路線點少於2個提示
            lyhFloatTip2("<span class='h3'>須要兩個點才能夠進行規劃路線!</span>");
            return null;
        }
        var start = new BMap.Point(line[0].point.lng, line[0].point.lat); //獲取存入的起點
        var end = new BMap.Point(line[1].point.lng, line[1].point.lat); //獲取存入的終點
        map.clearOverlays(); //清除以前的mk
        lyhFloatTip2("<span class='h3'>路線查詢中,請稍後...</span>")
        if (key == 'walk') { //步行,騎行規劃
            var walking = new BMap.WalkingRoute(map, {
                renderOptions : {
                    map : map,
                    panel : "line-result",
                    autoViewport : true,
                }
            });
            walking.search(start, end);
        } else if (key == 'bus') { //公交規劃
            var transit = new BMap.TransitRoute(map, {
                renderOptions : {
                    map : map,
                    panel : "line-result",
                    autoViewport : true,
                },
            });
            transit.search(start, end);
        } else if (key == 'car') { //自駕規劃
            var driving = new BMap.DrivingRoute(map, {
                renderOptions : {
                    map : map,
                    panel : "line-result",
                    autoViewport : true,
                }
            });
            driving.search(start, end);
        }
        customLine();
    }

    /**
     * 建立標註中心帶文字的自定義函數
     */
    function addMarker(point, label) {
        var marker = new BMap.Marker(point);
        //console.log(marker.getIcon())
        var icon = new BMap.Icon('http://api0.map.bdimg.com/images/marker_red_sprite.png', new BMap.Size(200, 400), {
            anchor : new BMap.Size(22, 40),
            infoWindowAnchor : new BMap.Size(10, 0),
            imageSize : new BMap.Size(80, 50),
        });
        marker.setIcon(icon)
        //console.log(marker.getIcon())
        map.addOverlay(marker);
        marker.setLabel(label);
    }

    /**
     * 刪除全部當前標註
     */
    function removeAll() {
        map.clearOverlays();
    }
</script>
</html>