高德地圖JSAPI Loader使用攻略

高德地圖api文檔：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare

安裝

安裝推薦使用 JSAPI Loader 進行加載，使用npm安裝，引入包的大小非常小。

按 NPM 方式使用 Loader

安裝：

npm i @amap/amap-jsapi-loader --save
// 官方文檔中加了-dev字段，加了-dev字段就只能在本地的時候使用，部署到服務器後將不引入包

使用：

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
    "key": "您申請的key值",   // 申請好的Web端開發者Key，首次調用 load 時必填
    "version": "2.0",   // 指定要加載的 JSAPI 的版本，缺省時默認爲 1.4.15
    "plugins": []  //插件列表
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

註冊賬號並申請Key

使用高德地圖api需要註冊高德地圖賬號並在開發者中心申請key。

註冊好賬號後登錄 https://console.amap.com/dev/key/app 或進入控制檯申請key。

首先進入右上角的[應用]，在左側菜單欄選擇[應用管理] => [我的應用]，並根據說明創建新應用，應用創建完成後在相應的應用後面點擊添加來獲取我們的key。

我們可以選擇Web服務，如果需要其他平臺的使用，可以根據需要進行更換，下方可使用服務會列出這個key可以使用的服務。

提交成功後就可以得到key了：

把key直接複製到我們引入高德地圖的 AMapLoader.load() 方法中的key就可以了。

基礎地圖組件使用

可以在load()的then()方法中配置我們的組件：

<div id="container" style="width: 100%; height: 300px;"></div>

// 創建地圖方法
createMap() {
  AMapLoader.load({
      "key": "您申請的key值",   // 申請好的Web端開發者Key，首次調用 load 時必填
      "version": "2.0",   // 指定要加載的 JSAPI 的版本，缺省時默認爲 1.4.15
      "plugins": []  //插件列表
  }).then((AMap)=>{
      let amap = new AMap.Map('container',{ // container爲容器的id
          zoom: 15, //初始化地圖層級
          center: [112.5266, 27.91507] //初始化地圖中心點
      });
  }).catch(e => {
      console.log(e);
  })
}

頁面中的效果是這樣的：

可以在 高德地圖API文檔 中查看其它地圖參數，根據需要進行添加。

其它組件使用

其它的組件可以根據 官方文檔 進行參考，具體的一些組件在教程菜單內：

絕大多數的組件都是通過 map.add(component) 進行實現的，下面就以點標記組件爲例詳細說明。

點標記組件使用

點標記通過new一個 AMap.Marker 然後加入到我們的map中，具體代碼：

// 創建地圖方法
createMap() {
  AMapLoader.load({
      "key": "您申請的key值",   // 申請好的Web端開發者Key，首次調用 load 時必填
      "version": "2.0",   // 指定要加載的 JSAPI 的版本，缺省時默認爲 1.4.15
      "plugins": []  //插件列表
  }).then((AMap)=>{
      let amap = new AMap.Map('container',{ // container爲容器的id
          zoom: 15, //初始化地圖層級
          center: [112.5266, 27.91507] //初始化地圖中心點
      });
      // 標記
      let marker = new AMap.Marker({
        position: [112.5266, 27.91507] // 基點位置
      });
      // 地圖添加標記
      amap.add(marker);
  }).catch(e => {
      console.log(e);
  })
}

頁面中就會顯示我們加的點標記了：

其餘組件都可以根據文檔的示例進行 map.add(component) 來實現。

常見問題

1.遠程獲取的經緯度數據地圖沒有渲染

這種問題很可能是 createMap() 方法沒有寫在請求的回調函數中。因爲請求是異步的，在獲取數據的過程中，會向下執行地圖渲染，此時是沒有position的數據的。將創建地圖的方法寫在回調函數中，就可以確保獲取到position的數據後再渲染地圖。