前端 – 百度地圖 API 基礎入門

MR_LP發表於2019-03-04
前端地圖API

請各位讀者新增一下作者的微信公眾號，以後有新的文章，將在微信公眾號直接推送給各位，非常感謝。

前端 – 百度地圖 API 基礎入門

##1.前言

最近想完成一個網站，裡面需要使用地圖相關的內容。

經過多方考慮，決定使用百度地圖來完成，所以將整個學習歷程進行簡單的整理，方便朋友們來快速入門。

本文系作者 李鵬（MR_LP）原創，轉載請私信並在文章開頭附帶作者和原文地址連結。

違者，作者保留追究權利。

注：若程式碼中存在部分圖片無法顯示，請移步簡書.

##2.獲取金鑰

百度地圖JavaScript API是一套由JavaScript語言編寫的應用程式介面，可幫助您在網站中構建功能豐富、互動性強的地圖應用，支援PC端和移動端基於瀏覽器的地圖應用開發，且支援HTML5特性的地圖開發。
該套API免費對外開放。自v1.5版本起，您需先申請金鑰（ak）才可使用，介面（除傳送簡訊功能外）無使用次數限制。

上述話術出自百度地圖，我們從上面的描述中也可以瞭解到，我們在使用百度地圖之前首先需要去註冊一個屬於自己的金鑰。

開啟該網站後，我們需要進行以下操作。

  1. 登入百度賬號
  2. 建立應用
    • 前端 – 百度地圖 API 基礎入門
    • 需要注意，我們當前只是進行一次測試，所以在白名單中直接書寫一個 星號即可（*）。
    • 需要注意，建立的時候需要將 JavaScript API 選項進行勾選。

  3. 檢視 AK

    • 前端 – 百度地圖 API 基礎入門
    • 需要注意，請勿將這個 AK 展示給其他人，因為我這裡只是給大家展示效果，所以就先不打碼了。

##3. 獲取JavaScript API服務方法

截止作者開始書寫之前，百度地圖 API 的版本為 V 2.0。

我們在獲取 API 之前需要首先完成註冊 AK 才可成功載入API JS檔案。

ak的使用方法如下：

//引數v表示您載入API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=1.4 

//使用JavaScript APIv2.0請先申請金鑰ak，按此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的金鑰複製程式碼

其中需要注意：

  • JavaScript API v1.4及以前版本無須申請金鑰（ak）。
  • 如果在實際開發中，需要獲取更高配額，請點選申請認證企業使用者。

最後，關於在引入的時候，有可能出現許可權驗證失敗。

前端 – 百度地圖 API 基礎入門

具體導致這個問題的原因可能出自以下三種情況。

  • 尚未在API控制檯申請ak，即`…ak=`;
  • 金鑰設定錯誤。
    • 如E4805d16520de693a3fe707cdc962045為正確的ak
    • 但是設定時輸入的ak為E4805d16520de693a3fe707cdc962045xx;
  • 金鑰未通過白名單，如下圖的ak在非baidu.com域名下會報錯。
  • API控制檯關閉JavaScript API時會報錯;
    • 前端 – 百度地圖 API 基礎入門
  • 錯誤的使用“服務端AK”用於 JavaScript API，JS API只支援瀏覽器型別的ak（自2016年1月15日升級）

最後附上進入 百度地圖 API javascript 的例項程式碼。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
      <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
    <!--使用V2.0版本的引用方式-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY&s=1" type="text/javascript" charset="utf-8"></script>
    <!--
        1. 如果使用JavaScript API ，需要加一個特殊欄位 (s=1)：
        https://api.map.baidu.com/api?v=2.0&ak=你的金鑰&s=1；
        2. 對於Web API 無需加特殊欄位，直接使用 HTTPS協議訪問即可，如Geocoding：
        https://api.map.baidu.com/geocoder/v2/?ak=你的祕鑰
        &callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
        3. 如果對資料安全要求高，建議使用 POST請求，避免把請求引數放到 URI中敏感資訊被洩露；

    -->

    <!--為了讓頁面以正常比例進行顯示並且禁止使用者縮放頁面的操作-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>

</body>
</html>

<!--
我的祕鑰

應用編號    應用名稱    訪問應用（AK）                        應用類別        備註資訊（雙擊更改）    應用配置
9290542    Test        bsNyezahIIgpUIjvYe51BKXzy1FXozUY        瀏覽器端                            設定 刪除

-->複製程式碼

##4. 關於 百度地圖 HTTPS 的說明

JavaScript API首家支援Https，已全面開放，無需申請Https服務可直接使用。

配置：

  1. 如果使用JavaScript API ，需要加一個特殊欄位 (s=1)：
    api.map.baidu.com/api?v=2.0&a…
  2. 對於Web API 無需加特殊欄位，直接使用 HTTPS協議訪問即可，如Geocoding：
    api.map.baidu.com/geocoder/v2…
  3. 如果對資料安全要求高，建議使用 POST請求，避免把請求引數放到 URI中敏感資訊被洩露。

##5. 百度地圖的相容性

  • 瀏覽器：
    • IE 6.0+
    • Firefox 3.6+
    • Opera 9.0+
    • Safari 3.0+
    • Chrome
  • 作業系統：
    • Windows
    • Mac
    • Linux
  • 移動平臺：
    • iPhone
    • Android

請各位開發者注意自己當前開發需要相容的版本。

##6. 第一個小案例

在開始之前，我們們首先通過一段例項程式碼進行效果的展示。

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
<style type="text/css">  
    html{height:100%}  
    body{height:100%;margin:0px;padding:0px}  
    #container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的金鑰&callback=initialize"
</script>
</head>  

<body>  
    <div id="container"></div> 
</body>  
<script type="text/javascript"> 
    /*
     建立地圖例項  
     * 位於BMap名稱空間下的Map類表示地圖，通過new操作符可以建立一個地圖例項。
     * 其引數可以是元素id也可以是元素物件。
     * 注意在呼叫此建構函式時應確保容器元素已經新增到地圖上。*/
    var map = new BMap.Map("container");

    /*
     建立點座標  
     * 這裡我們使用BMap名稱空間下的Point類來建立一個座標點。
     * Point類描述了一個地理座標點，其中116.404表示經度，39.915表示緯度。*/
    var point = new BMap.Point(116.404, 39.915); 

    /*
     地圖初始化
     * 在建立地圖例項後，我們需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設定中心點座標和地圖級別。 
     * 地圖必須經過初始化才可以執行其他操作。*/
    map.centerAndZoom(point, 15);

    /*
     下面示例顯示一個地圖，等待兩秒鐘後，它會移動到新中心點。
     * panTo()
     *         將讓地圖平滑移動至新中心點，如果移動距離超過了當前地圖區域大小，則地圖會直跳到該點。
     * zoomTo()
     * 
     * setCenter()
     * 
     * */
    window.setTimeout(function(){  
        map.panTo(new BMap.Point(116.450, 39.918));    
    }, 1000);

    /*
     預設情況下地圖不支援滑鼠滾輪縮放操作，因為這樣可能會影響整個頁面的使用者體驗，
     但是如果您希望在地圖中使用滑鼠滾輪控制縮放，則可以呼叫map.enableScrollWheelZoom方法來開啟。
     配置選項可以在Map類參考的配置方法一節中找到。
     * */
</script>  
</html>複製程式碼

可以看到，我們如果需要使用百度地圖，有至少三步操作需要完成。

  • 建立地圖例項
  • 建立點座標
  • 地圖初始化

在程式碼的最後段，放上一個方法，我們通過一個超時呼叫，在 1 秒之後，讓地圖進行平移。

需要注意一個小問題，如果跳轉的點處於當前初始的地圖的顯示範圍時，則地圖會進行平移，否則就是重新繪製當前地圖。

最後顯示效果如下：

前端 – 百度地圖 API 基礎入門

##7. 百度地圖控制元件

這時候我們發現，我們已經在當前頁面實現了一個小的地圖，但是我們卻發現一個小問題。

為什麼我的地圖上空空一片呀。

這是因為我們還沒有向百度地圖中新增我們需要的控制元件。

地圖API中提供的控制元件有：

  • Control：控制元件的抽象基類，所有控制元件均繼承此類的方法、屬性。通過此類您可實現自定義控制元件。
  • NavigationControl：地圖平移縮放控制元件，PC端預設位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控制元件，預設位於地圖右下方。
  • OverviewMapControl：縮略地圖控制元件，預設位於地圖右下方，是一個可摺疊的縮略地圖。
  • ScaleControl：比例尺控制元件，預設位於地圖左下方，顯示地圖的比例關係。
  • MapTypeControl：地圖型別控制元件，預設位於地圖右上方。
  • CopyrightControl：版權控制元件，預設位於地圖左下方。
  • GeolocationControl：定位控制元件，針對移動端開發，預設位於地圖左下方。

那麼接下來我們就開始向地圖中去新增控制元件。

###7.1 新增控制元件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
      <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
    <style type="text/css">
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
</head>
<body>
    <div id="container"></div> 
</body>
<script type="text/javascript" charset="utf-8">
    /*
     向地圖新增控制元件
     * 可以使用Map.addControl()方法向地圖新增控制元件。
     * 在此之前地圖需要進行初始化。
     * 例如，要將標準地圖控制元件新增到地圖中，可在程式碼中新增如下內容：*/
    var map = new BMap.Map("container");    
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.addControl(new BMap.NavigationControl());
</script>
</html>複製程式碼

實現效果如下：

前端 – 百度地圖 API 基礎入門

我們會發現，在我們的地圖左上角出現了一個新的控制元件，我們可以通過這個控制元件去實現對地圖的方法以及縮小。

除此之外，我們還可以新增其他地圖控制元件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
      <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
    <style type="text/css">
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #container{height:100%}  
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
</head>
<body>
    <div id="container"></div> 
</body>
<script type="text/javascript" charset="utf-8">
    /*
     向地圖新增控制元件
     * 可以使用Map.addControl()方法向地圖新增控制元件。
     * 在此之前地圖需要進行初始化。
     * 例如，要將標準地圖控制元件新增到地圖中，可在程式碼中新增如下內容：*/
    var map = new BMap.Map("container");    
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
//    map.addControl(new BMap.NavigationControl());
    /*
     可以向地圖新增多個控制元件。
     在本例中我們向地圖新增一個平移縮放控制元件、一個比例尺控制元件和一個縮圖控制元件。
     在地圖中新增控制元件後，它們即刻生效。
     * */

    //地圖平移縮放控制元件
    map.addControl(new BMap.NavigationControl());
    //比例尺控制元件
    map.addControl(new BMap.ScaleControl());    
    //縮略地圖控制元件
    map.addControl(new BMap.OverviewMapControl());   
    //地圖型別控制元件
    map.addControl(new BMap.MapTypeControl());    
    map.setCurrentCity("北京"); // 僅當設定城市資訊時，MapTypeControl的切換功能才能可用
</script>
</html>複製程式碼

可以看到，我們在原始的縮放控制元件之後去新增了三個新的控制元件。

實現效果如下：

前端 – 百度地圖 API 基礎入門

除此之外，我們還可以設定地圖空間所顯示的位置和偏移。

###7.2 控制元件的顯示位置和偏移

ControlAnchor 此常量表示控制元件的定位。

常量 描述
BMAP_ANCHOR_TOP_LEFT 控制元件將定位到地圖的左上角
BMAP_ANCHOR_TOP_RIGHT 控制元件將定位到地圖的右上角
BMAP_ANCHOR_BOTTOM_LEFT 控制元件將定位到地圖的左下角
BMAP_ANCHOR_BOTTOM_RIGHT 控制元件將定位到地圖的右下角

例項程式碼：

    //地圖平移縮放控制元件
    map.addControl(new BMap.NavigationControl({
        anchor:BMAP_ANCHOR_TOP_RIGHT
    }));複製程式碼

除了指定停靠位置外，還可以通過偏移量來指示控制元件距離地圖邊界有多少畫素。

如果兩個控制元件的停靠位置相同，那麼控制元件可能會重疊在一起，這時就可以通過偏移值使二者分開顯示。

var opts = {offset: new BMap.Size(150, 5)}    
map.addControl(new BMap.ScaleControl(opts));複製程式碼

同時，我們還可以修改控制元件的配置。

###7.3 控制元件的顯示方式

NavigationControlType此常量表示平移縮放控制元件的型別。

常量 描述
BMAP_NAVIGATION_CONTROL_LARGE 標準的平移縮放控制元件（包括平移、縮放按鈕和滑塊）
BMAP_NAVIGATION_CONTROL_SMALL 僅包含平移和縮放按鈕
BMAP_NAVIGATION_CONTROL_PAN 僅包含平移按鈕
BMAP_NAVIGATION_CONTROL_ZOOM 僅包含縮放按鈕

例項程式碼：

    //地圖平移縮放控制元件
    map.addControl(new BMap.NavigationControl({
        //僅包含平移按鈕
        type:BMAP_NAVIGATION_CONTROL_PAN
    }));複製程式碼

###7.4 關於百度地圖控制元件的示例

最後放出一個關於百度定位相關控制元件的案例。

<!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 {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
    #allmap{width:100%;height:100%;}
    p{margin-left:5px; font-size:14px;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
  <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
  <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
  // 百度地圖API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
  // 新增帶有定位的導航控制元件
  var navigationControl = new BMap.NavigationControl({
    // 靠左上角位置
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // LARGE型別
    type: BMAP_NAVIGATION_CONTROL_LARGE,
    // 啟用顯示定位
    enableGeolocation: true
  });
  map.addControl(navigationControl);
  // 新增定位控制元件
  var geolocationControl = new BMap.GeolocationControl();
  geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = ``;
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("當前定位地址為：" + address);
  });
  geolocationControl.addEventListener("locationError",function(e){
    // 定位失敗事件
    alert(e.message);
  });
  map.addControl(geolocationControl);
</script>複製程式碼

程式碼效果如下：

前端 – 百度地圖 API 基礎入門

##8. 後記

其實今天只是介紹了一下百度最基礎的部分。

除此之外，百度地圖還可以去使用其他的特殊操作。

  • 覆蓋物
  • 事件
  • 地圖圖層
  • 工具
  • 服務
  • 使用者資料圖層
  • 全景圖展現
  • 定製個性地圖

最後感謝百度地圖的開發工程師。

轉載請於文章開頭處註明作者和原文連結，否則保留法律追究權利。

##附錄：

A ： 滑鼠滾輪縮放地圖

<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 type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
    <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");            
    map.centerAndZoom("重慶",12);                
    map.enableScrollWheelZoom();   //啟用滾輪放大縮小，預設禁用
    map.enableContinuousZoom();    //啟用地圖慣性拖拽，預設禁用
</script>複製程式碼

實現效果：

前端 – 百度地圖 API 基礎入門

###B : 查詢顯示位置

<!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{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";font-size:14px;}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
    <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("北京",12);                   // 初始化地圖,設定城市和地圖級別。

    var ac = new BMap.Autocomplete(    //建立一個自動完成的物件
        {"input" : "suggestId"
        ,"location" : map
    });

    ac.addEventListener("onhighlight", function(e) {  //滑鼠放在下拉選單上的事件
    var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }    
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //滑鼠點選下拉選單後的事件
    var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地圖上所有覆蓋物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //獲取第一個智慧搜尋的結果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //新增標註
        }
        var local = new BMap.LocalSearch(map, { //智慧搜尋
          onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>複製程式碼

程式碼效果：

前端 – 百度地圖 API 基礎入門

###C ： 根據經緯度確定位置

<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{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
        #allmap{height:500px;width:100%;}
        #r-result{width:100%; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> 
    <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
    <div id="allmap"></div>
    <div id="r-result">
        經度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
        緯度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
        <input type="button" value="查詢" onclick="theLocation()" />
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
    map.enableScrollWheelZoom(true);

    // 用經緯度設定地圖中心點
    function theLocation(){
        if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
            map.clearOverlays(); 
            var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
            var marker = new BMap.Marker(new_point);  // 建立標註
            map.addOverlay(marker);              // 將標註新增到地圖中
            map.panTo(new_point);      
        }
    }
</script>複製程式碼

實現效果：

前端 – 百度地圖 API 基礎入門

相關文章