摘要：一前言在使用百度地圖開發的過程中，查閱百度地圖官網基本上就能滿足開發的需求，但是有時候需要設置一些東西，很難在官網上查閱到相關的方法技巧。希望百度地圖能夠越來越強大，這樣開發者就可以愉快的開發了

在使用百度地圖開發的過程中，查閱百度地圖官網demo基本上就能滿足開發的需求，但是有時候需要設置一些東西，很難在官網上查閱到相關的方法技巧。筆者特意把開發過程中遇到的一些疑難雜癥和解決方式總結出來寫成這篇文章，供大家參考。

測試實例：多邊形(polygon) 圓(circle)
出現的問題：配置對象(PolygonOptions)fillOpacity設置為0； 仍然會出線白色填充，沒有實現完全透明：

const points = [ ... ];//一系列百度坐標
const opts = {fillOpacity:0,strokeColor:balck,strokeOpacity:1};
const polygon = new BMap.Polygon(points,opts);

結果：

方法：使用setFillColor設置填充

const polygon = new BMap.Polygon(...opts);//創建多邊形實例
polygon.setFillColor("");//設置多邊形填充完全透明

測試實例：地面疊加層(GroundOverlay)
出現的問題：按照類參考的參數配置(GroundOverlayOptions)，并沒有加載出圖片。

  const opts = {
    opacity: 1,
    imageURL:"http://lbsyun.baidu.com/jsdemo/img/si-huan.png",
    displayOnMinLevel: 0,
    displayOnMaxLevel: 20,
  };
  const groundOverlay = new BMap.GroundOverlay(bounds, opts);
  

后來查看官方demo才發現如何配置：setImageURL

  // 西南角和東北角
  var SW = new BMap.Point(116.29579,39.837146);
  var NE = new BMap.Point(116.475451,39.9764);

  groundOverlayOptions = {
    opacity: 1,
    displayOnMinLevel: 10,
    displayOnMaxLevel: 14
  }
  // 初始化GroundOverlay
  var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
  // 設置GroundOverlay的圖片地址     groundOverlay.setImageURL("http://lbsyun.baidu.com/jsdemo/img/si-huan.png");

百度地圖上Marker類型設置簡單，可以使用自己定義的圖標，還支持對圖標的偏移和旋轉，但是因為它只根據了一個中心點，造成了一個問題，設置的圖標自身不支持跟隨地圖進行放縮。這樣就造成了在特定場景下無法滿足業務的需求。
百度地圖地面疊加層GroundOverlay可以設置自己的圖標，因為它是根據經緯度范圍設置的，所以支持跟隨地圖放縮。但是在javascript開發中它并不支持對圖形的旋轉。圖形的旋轉可以用C++或者JAVA對圖形矩陣做變換得到。所以想要支持旋轉的就無法實現了。
如果我想設計一個既支持放縮，又能設置旋轉的旗標，那該怎么辦呢？
有一種方案：
Marker + addEventListener("zoomEnd",function(){});使用Marker類型，并且監聽地圖放縮事件，動態設置圖標大小。

正如百度地圖人員回答的那樣，百度地圖在覆蓋物重疊時會有一個默認的層級顯示順序，目前并不支持對任何單個實例設置顯示層級。
但是事實上也沒有那么悲慘，百度還是提供了兩種覆蓋物類型Marker(setZIndex)和Label(setZIndex)，一種自定義圖層(TileLayer)來支持設置ZIndex，但是需要注意的是這是針對一類中不同實例的，如果不同類型重疊的話，還是解決不了。

對于Marker和Label：setZIndex
對于TileLayer:zIndex

它們會根據這個值的大小來排列顯示層次的優先級，值越大，就會顯示在越上層。

在marker實例中，有時需要放大一個正在被選中的圖標（始終保持一個放大），這就要求這個選中的實例始終出現在最頂層，這時候有一個非常實用的方法：setTop(isTop: Boolean) 詳情>>

在vue組件中使用百度地圖很多人會選擇使用第三方庫，例如：vue-baidu-map。
如果在使用中出現了無法逾越的問題，請看這里：直接用百度地圖庫在vue組件中完美運行。
參考文章：vue調用百度地圖api時Bmap沒有定義的解決辦法

引入百度地圖：

在百度地圖還未加載完成時就調用了百度地圖的方法。
實現方案：類似于異步加載
map.js文件：
export default {   
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=您的密鑰";
    //console.log("初始化百度地圖腳本...");   
    return new Promise((resolve, reject) => {  
      // 如果已加載直接返回  
      if(typeof BMap !== "undefined") {  
        resolve(BMap);  
        return true;  
      }  
      // 百度地圖異步加載回調處理  
      window.onBMapCallback = function () {  
        console.log("百度地圖腳本初始化成功...");  
        resolve(BMap);  
      };  
  
      // 插入script腳本  
      let scriptNode = document.createElement("script");  
      scriptNode.setAttribute("type", "text/javascript");  
      scriptNode.setAttribute("src", BMap_URL);  
      document.body.appendChild(scriptNode);  
    });  
}  
組件中調用方式：
import {MP} from "./map.js"；

mounted(){  
            this.$nextTick(function(){  
              var _this = this;  
              MP(_this.ak).then(BMap => {  
                          //在此調用api  
  
  }）

這樣就可以完美運行了。
6.地圖項目在測試或者線上環境出現跨域訪問問題
你在本地測試都OK，到了遠程服務器上就出錯了。這里可能是服務器在安全策略上做了限制。
你檢查一下script src 的地址 協議是http還是https，如果是http就會出錯，直接改成https就好了。和http一樣都支持地圖方法，并且更安全。
7.地圖繪制圖層映射到地圖上的地理位置
在使用地圖進行繪圖的時候，通常采用的方案是在地圖上面放一個圖層用來讓用戶選擇繪制的位置，當用戶確在此處繪制時就需要開發員拿到此處的經緯度來作為圖標中心點進行調用百度地圖API繪制各種類型的實例。
那么如何確定這個經緯度呢？這里需要引用一個相對運動的方法：將地圖和view圖層放在同一個容器里，讓view圖層始終在容器的中心點上（內水平垂直居中），保持view圖層位置不變，讓用戶拖動地圖--這樣就能讓view層保持在地圖的中心位置。然后可以調用百度地圖API getCenter方法拿到當前的中心點坐標，也就是需要畫上去的圖標的中心經緯度。
8.慎用GroundOverlay類型
先說一下常用到的Marker和GroundOverlay類型。
（1）Marker
特點：支持ICON的旋轉
缺點：改變zoom值時ICON不會縮放
（2）GroundOverlay
特點：改變zoom值時ICON會自動縮放
缺點：不支持ICON的旋轉
為什么說慎用GroundOverlay類型？其實所有的GroundOverlay類型都可以用Marker來替代，可以使用本文標題3介紹的方法控制Marker的縮放。還有其他原因如下：
（1）由于GroundOverlay類型ICON的縮放由百度地圖自己控制，在有些情況下總會有個別ICON會縮放失效。（做過的項目中遇到過這個問題）
（2）無法逐級控制在哪個zoom下顯示多大
（3）經緯度范圍并不容易控制
9.一些非常有用的庫
map庫是最基本的庫，用它來實例話一個map對象，在頁面上展示一幅地圖。除了這個地圖庫之外，還有很多實用的庫。具體參考：開源庫
下面就我用到過的幾個來說明一下：
（1）鼠標繪制工具條庫
提供鼠標繪制點、線、面、多邊形（矩形、圓）的編輯，用戶可使用JavaScript API對應覆蓋物（點、線、面等）類接口對其進行屬性（如顏色、線寬等）設置、編輯（如開啟線頂點編輯等）等功能。
也就是說用戶有自主繪制的權利，并且在完成繪制的時刻，開發者是能獲取到經緯度的，這就足夠了。
（2）幾何運算
GeoUtils類提供若干幾何算法，用來幫助用戶判斷點與矩形、 圓形、多邊形線、多邊形面的關系,并提供計算折線長度和多邊形的面積的公式。 主入口類是GeoUtils。
最實用的就是使用庫里的類方法可以判斷點在不在多邊形內啦～～～
（3）聚合marker
MarkerClusterer標記聚合器用來解決加載大量點要素到地圖上產生覆蓋現象的問題，并提高性能。 主入口類是MarkerClusterer。
當marker數量特變多，十分密集的時候，會產生性能問題和堆積問題，這時候做個聚合是十分有用的方式。
（4）還有更多等待探索。。。
三 后記
使用百度地圖就要遵守百度地圖的上支持的方法方式，目前百度地圖在圖層重疊時的層級顯示問題并沒有做出用戶自定義設置方案，對于label和marker倒是暴露了setZindex方法設置自己的層級。希望百度地圖能夠越來越強大，這樣開發者就可以愉快的開發了～