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

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

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

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

結(jié)果：

方法：使用setFillColor設(shè)置填充

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

測試實例：地面疊加層(GroundOverlay)
出現(xiàn)的問題：按照類參考的參數(shù)配置(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才發(fā)現(xiàn)如何配置：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);
  // 設(shè)置GroundOverlay的圖片地址     groundOverlay.setImageURL("http://lbsyun.baidu.com/jsdemo/img/si-huan.png");

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

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

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

它們會根據(jù)這個值的大小來排列顯示層次的優(yōu)先級，值越大，就會顯示在越上層。

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

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

引入百度地圖：

在百度地圖還未加載完成時就調(diào)用了百度地圖的方法。
實現(xiàn)方案：類似于異步加載
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;  
      }  
      // 百度地圖異步加載回調(diào)處理  
      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);  
    });  
}  
組件中調(diào)用方式：
import {MP} from "./map.js"；

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

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