一個百度MAP導航的基礎封裝

時間 2019-11-18

標籤一個百度 map 導航基礎封裝欄目軟件設計简体版

原文原文鏈接

項目中須要根據點擊時候點擊的內容,輸入百度地圖查找並展現規劃等相關功能javascript

因而封裝了一個單獨的百度map的html頁面以供調用css

功能包括了html

①展現底圖java

②切換衛星圖,切換衛星路線圖,切換普通地圖jquery

③經過百度js對自身進行定位並標註bootstrap

④根據輸入的內容查找地點,並可生成當前位置到目標位置的線路規劃api

⑤任意兩點生成線路規劃緩存

⑥清除標註app

⑦跳轉到百度地圖官方頁面或打開app進行導航ide

⑧展現線路規劃

使用了本身封裝的工具 lyhFloatTip:連接以下:

懸浮提示工具（懸浮出現自動消失）

代碼以下:

<!DOCTYPE html>
<html>
<head>
<title>map-index.html</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=aAgtfUXdoQOxbI7ZLW197GaWZYfhokCO&services=&t=20190123111209"></script>

<script src="./../static/jquery/jquery.easing.1.3.js"></script>

<style type="text/css"> .anchorBL { display: none;
} .btn { background-color: white; color: #222222;
}

/*去除bootstrap按鈕點擊後的藍色方形邊框*/ .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none;
}
</style>
</head>
<body>
    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
        <div style="color:white;padding:0px;background-image: linear-gradient( 135deg, #FFAA85 10%, #B3315F 100%);border-radius: 4px" class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
            <div style='font-zize:24px;padding:5px 10px' class='col-lg-6 col-md-6 col-sm-6 col-xs-6'>路線規劃</div>
        </div>
    </div>
    <div 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:600px" 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-sm' onclick="removeAll();$('#map-page').hide(300)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
                <input id='search-input' type="text" class="form-control" style='border-color:green'>
                <div style='position:absolute;top:10px;right:30px;'>
                    <button id='search-location-btn' class='btn btn-success btn-xs' onclick='locationSearch("map")'>
                        <span class="glyphicon glyphicon-search"></span> 搜索 </button>
                    <button class='btn btn-primary btn-xs' title='本身到目標的步行或騎行路線規劃' onclick='goTo("walk")'>步/騎</button>
                    <button class='btn btn-primary btn-xs' title='本身到目標的公交路線規劃' onclick='goTo("bus")'>公交</button>
                    <button class='btn btn-primary btn-xs' title='本身到目標的自駕車路線規劃' onclick='goTo("car")'>駕車</button>
                </div>
            </div>
            <!-- 地圖類型切換按鈕 -->
            <div style='position:absolute;top:45px;right:15px'>
                <button class='btn btn-primary btn-sm' 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-sm' title='刷新本身的定位' onclick='myLocation()'>
                    <span class="glyphicon glyphicon-screenshot"></span> 我 </button>
                <button class='btn btn-warning btn-sm' 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-sm' onclick='myLine("walk")'>步/騎路線</button>
                <button style='display:none' class='customline btn btn-info btn-sm' onclick='myLine("bus")'>公交路線</button>
                <button style='display:none' class='customline btn btn-info btn-sm' onclick='myLine("car")'>駕車路線</button>
                <button id='customLine' class='btn btn-success btn-sm' onclick='customLine()'>自定義路線開啓</button>
            </div>
            <!-- 調用百度地圖html或app導航連接按鈕 -->
            <div style='position: absolute;right:5px;bottom:45px'>
                <button id='nav-baidu' style='display:none' class='customline btn btn-info btn-sm' 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() { initMap('map'); //加載頁面初始化map
 }) //個人當前定位的緩存
    var mypoint = 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(); //開啓鍵盤操做功能

        //獲取當前定位位置
        var pointGet = setInterval(function() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { mypoint = r; //將當前獲取的位置存入緩存
                    var point = new BMap.Point(r.point.lng, r.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', }) line = []; //初始化線路規劃
 line.push(mypoint); //存入當前自身定位
 addMarker(mypoint.point, label); //加載標註
 clearInterval(pointGet); //清除計時器
                //console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
 } else { console.error('failed' + this.getStatus()); clearInterval(pointGet); //發生錯誤清除計時器
 } }, { enableHighAccuracy : true } ) }, 10000); //添加單擊監聽事件
 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); customLineFlag = true; $('#customLine').html('自定義路線開啓中'); $('.customline').show(); } else { //關閉自定義路線
 map.removeEventListener("click", 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' : '50%', 'width' : '20px', 'height' : '20px', }) addMarker(point, label); //添加標註
 } } /** * 從自身定位點到目標點的線路規劃 */
    //lyhFloatTip的相關代碼的連接爲:
    function goTo(key) { if (null == mypoint) { //自身定位未完成提示
 lyhFloatTip("正在對本身位置進行定位,請稍後..."); return null; } if (null == target) { //沒有選擇目標點
 lyhFloatTip("未點選目標位置!"); 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) { lyhFloatTip("請點擊地圖選擇要導航的目標位置..."); } 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 mapLocationTimer = setInterval(function() { if (null != mypoint) { console.log('您的位置：' + mypoint.point.lng + ',' + mypoint.point.lat); //刪除以前的定位點
                var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length; i++) { try { //並不是每一個 getLabel[i]都有getLabel函數,因此報錯,遠程調用,沒法使用typeof判斷
                        if (allOverlay[i].getLabel().content == "我") { map.removeOverlay(allOverlay[i]); return false; } } catch (e) { //console.log(e)
 } } //添加新的定位點
                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', }) line = []; line.push(mypoint); //添加自身定位做爲起點
 addMarker(mypoint.point, label); //添加標註
 map.panTo(mypoint.point); //將自身定位做爲地圖中心
 clearInterval(mapLocationTimer); } else { mapLocationTimerCount++; if (mapLocationTimerCount > 30) { //30秒都沒定位成功....
 console.log('30秒都沒獲取定位點...') mapLocationTimerCount = 0; clearInterval(mapLocationTimer); } } }, 1000) } /** * 繪製路線 徒步-騎行-公交-駕車 */
    function myLine(key) { if (line.length < 2) { //路線點少於2個提示
 lyhFloatTip("須要兩個點才能夠進行規劃路線!"); 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
        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); } } /** * 建立標註中心帶文字的自定義函數 */
    function addMarker(point, label) { var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setLabel(label); } /** * 刪除全部當前標註 */
    function removeAll() { map.clearOverlays(); } </script>
</html>