百度地圖API

時間 2019-11-11

標籤百度地圖 api 简体版

原文原文鏈接

官網：http://lbsyun.baidu.com/javascript

如下都是在Web端完成操做html

http://lbsyun.baidu.com/jsdemo.htm#b0_3 和 http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.htmljava

這兩個頁面基本能夠解決你的問題。git

更新：web

17/8/5 ① 定位當前位子 ② 座標轉換，GPS轉百度座標 api

①獲取祕鑰數組

填寫資料獲取祕鑰，沒有祕鑰啥也作不了。函數

而後在頁面上調用jsAPIspa

咱們就能夠用此API裏面全部的類。 code

建立咱們的地圖:

Map : 此類是地圖API的核心類，用來實例化一個地圖。

構造函數：

MapOptions (此類表示Map構造函數的可選參數。它沒有構造函數，但可經過對象字面量形式表示。)

MapOptions 主要屬性

Map:

主要方法：

事件想了解本身去看吧，這裏主要是看方法。

打造一個地圖容器（一片區域）

<div style="width: 800px; height: 600px; border: 1px solid gray" id="container"></div>   //先把容器的大小肯定

     var map = new BMap.Map("container");//建立Map實例
            //初始化  兩個選其一
            map.centerAndZoom(new BMap.Point(114.3162001,30.58108413),12);//座標點  第二個級別參數必須的加 
           // map.centerAndZoom("武漢");//城市名

    map.enableScrollWheelZoom(true);//滾輪縮放大小
            map.setMinZoom(4);//最小級別
            map.setMaxZoom(16);//最大級別
            //或
           // var map = new BMap.Map("container", {setMinZoom:4,setMaxZoom:16});//建立Map實例

添加平移縮放控件

NavigationControl

屬性：(控件都有這幾個屬性)

            //添加默認縮放平移控件  默認是左上角 可滑動縮放
            var ctrNav = new BMap.NavigationControl({
            });
            //等同於
            //var ctrNav = new BMap.NavigationControl({
            //    anchor: BMAP_ANCHOR_TOP_LEFT,
            //    type: BMAP_NAVIGATION_CONTROL_LARGE
            //})

            map.addControl(ctrNav);

ScaleControl

比例尺控件

       //比例尺控件 默認在左下角
            var ctrSc = new BMap.ScaleControl();
            map.addControl(ctrSc);

          //地圖控件  默認右上角，三種都有
            var ctrMap = new BMap.MapTypeControl({
            })
            map.addControl(ctrMap);

你須要什麼在參數裏面進行過濾

            var mapType1 = new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] });
            map.addControl(mapType1);

New BMap.CityListControl() 城市列表控件

覆蓋類

            //書城路18號歡樂匯5樓
            var mark = new BMap.Marker(new BMap.Point(114.345847, 30.5126));
            //參數只能用座標來表示，若是想要用地址表示，須要用到地址解析
            map.addOverlay(mark);

  //書城路18號歡樂匯5樓 
            //新建一個圖表
            var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300, 157));
            var mark = new BMap.Marker(new BMap.Point(114.345847, 30.5126),{ title: "666",icon:myIcon });
            //參數只能用座標來表示，若是想要用地址表示，須要用到地址解析
            map.addOverlay(mark);

  
            //帶檢索功能的信息窗口
            var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                            '地址：書城路18號歡樂匯5樓' + '<br/>' +
                            '電話：15871.......' +  '<br/>' +
                            '簡介：健身電影娛樂場所' + '<br/>' +
                            '</div>';
            //建立檢索信息窗口對象
            var searchInfoWindow = null;
            searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                title: "歡樂匯影城",      //標題
                width: 290,             //寬度
                height: 90,              //高度
                panel: "panel",         //檢索結果面板
                enableAutoPan: true,     //自動平移
                searchTypes: [
                    BMAPLIB_TAB_SEARCH,   //周邊檢索
                    BMAPLIB_TAB_TO_HERE,  //到這裏去
                    BMAPLIB_TAB_FROM_HERE //從這裏出發
                ]
            });
            var marker = new BMap.Marker(new BMap.Point(114.345847, 30.5126)); //建立marker對象
           // marker.enableDragging(); //marker可拖拽
            marker.addEventListener("click", function (e) {
                searchInfoWindow.open(marker);
            })
            map.addOverlay(marker); //在地圖中添加marker

GPS 關係路線 Rote 後面都有這個，步行，駕車等等...

     var driving2 = new BMap.DrivingRoute(map, {
                renderOptions:
                    { map: map, autoViewport: true }
            });    //駕車實例
            driving2.search("湖北省武漢市光谷廣場","湖北省武漢市礄口區中山公園"); //把路線劃出來

檢索

     //單個關鍵字
            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map, autoViewport:true }
            });
            local.search("景點");

            //多關鍵字
            var myKeys = ["酒店", "加油站"];  //用數組存起來 var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map, panel: "r-result" }, //須要準備一個id=r-result的區域來顯示信息
                pageCapacity: 5
            });
            local.searchInBounds(myKeys, map.getBounds());

路線規劃：計算駕車時間和距離

getPlan的父類

            var output = "時長爲：";

            //檢索完成後的回調函數     results 就是DrivingRouteResult  
            var searchComplete = function (results) {
                if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                    return;
                }
                var plan = results.getPlan(0); //第0條方案   
                output += plan.getDuration(true) + "\n";                //獲取時間
                output += "總路程爲：";
                output += plan.getDistance(true) + "\n";             //獲取距離
            }


            var transit = new BMap.DrivingRoute(map, {
                renderOptions: { map: map },
                onSearchComplete: searchComplete, //執行回調函數
                onPolylinesSet: function () { //折線添加完成執行函數
                    setTimeout(function () { alert(output) }, "1000");
                }
            });
            transit.search("湖北省武漢市光谷廣場", "湖北省武漢市礄口區中山公園"); //劃折線

步行規劃跟駕車相似的，會一個全都會了

   //步行規劃
            var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
            walking.search("湖北省武漢市光谷廣場", "湖北省武漢市武漢市江漢區中山公園");

地址解析：當你地址解析不正確的時候，須要轉換一下座標的，下面介紹

            // 建立地址解析器實例        有時候web網頁中解析的地址有誤差
            var myGeo = new BMap.Geocoder();   
         //能夠對地址進行批量解析 把全部的地址進行循環，傳到 .getPoint 裏面去就能夠了 
 //這個能夠配合檢索窗口一塊兒用，看你須要什麼進行結合就能夠了 // 將地址解析結果顯示在地圖上,並調整地圖視野
            myGeo.getPoint("光谷廣場", function (point) {
                if (point) {
                    map.centerAndZoom(point, 16);  
                    map.addOverlay(new BMap.Marker(point));
                } else {
                    alert("您選擇地址沒有解析到結果!");
                }
            }, "武漢市");

時間：更新 17/8/5

逆解析：

定位當前座標的案例：

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxx"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> <%--用於單個座標轉換方法--%>

 <script type="text/javascript">
            $(function () {           
              navigator.geolocation.getCurrentPosition(translatePoint); //定位 成功時調用次方法、 
            });
            function translatePoint(position) {
                var currentLat = position.coords.latitude; //地理緯度
                var currentLon = position.coords.longitude;  //地理經度
                var gpsPoint = new BMap.Point(currentLon, currentLat);//  Point gosPoint=new BMap.Point(經度，緯度)
                console.log("befor:"+gpsPoint.lng+","+gpsPoint.lat);

                BMap.Convertor.translate(gpsPoint, 0, initMap); //轉換座標   成功調用下面的方法
            }
            function initMap(point) {
                console.log("after:"+point.lng+","+point.lat);
                //初始化地圖 
                map = new BMap.Map("container");
                map.enableScrollWheelZoom(true);     //開啓鼠標滾輪縮放
                map.addControl(new BMap.NavigationControl());  //  添加平移縮放控件
                map.addControl(new BMap.ScaleControl());  //比例尺
                map.addControl(new BMap.OverviewMapControl()); //此類表示縮略地圖控件。
                map.centerAndZoom(point, 15);  //設置中心城市
                map.addOverlay(new BMap.Marker(point));  //添加覆蓋物

                var geoc = new BMap.Geocoder();
                geoc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    console.log(addComp);
                    alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                });
            }
        </script>

座標轉換

只有當使用定位的時候纔會使用座標轉換，使用自帶的API

      navigator.geolocation.getCurrentPosition(calBack);  //定位成功執行回調函數

            function calBack(position) {
                var y = position.coords.latitude; //地理緯度
                var x = position.coords.longitude;  //地理經度
                var ggPoint = new BMap.Point(x, y);
                //地圖初始化
                var bm = new BMap.Map("container");
                bm.centerAndZoom(ggPoint, 15);
                bm.addControl(new BMap.NavigationControl());
                //添加gps marker和label
                var markergg = new BMap.Marker(ggPoint);
                bm.addOverlay(markergg); //添加GPS marker
                var labelgg = new BMap.Label("未轉換的GPS座標（錯誤）", { offset: new BMap.Size(20, -10) });
                markergg.setLabel(labelgg); //添加GPS label

                //座標轉換完以後的回調函數
                translateCallback = function (data) {
                    if (data.status === 0) {
                        var marker = new BMap.Marker(data.points[0]);
                        bm.addOverlay(marker);
                        var label = new BMap.Label("轉換後的百度座標（正確）", { offset: new BMap.Size(20, -10) });
                        marker.setLabel(label); //添加百度label
                        bm.setCenter(data.points[0]);
                    }
                }

                setTimeout(function () {
                    var convertor = new BMap.Convertor();
                    var pointArr = [];
                    pointArr.push(ggPoint);
                    convertor.translate(pointArr, 1, 5, translateCallback)  //座標轉換
                }, 1000);

            }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。