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

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

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

const points = [ ... ];//一系列百度坐標(biāo)
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)建多邊形實(shí)例
polygon.setFillColor("");//設(shè)置多邊形填充完全透明

測(cè)試實(shí)例：地面疊加層(GroundOverlay)
出現(xiàn)的問(wèn)題：按照類參考的參數(shù)配置(GroundOverlayOptions)，并沒(méi)有加載出圖片。

  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);
  

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

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

對(duì)于Marker和Label：setZIndex
對(duì)于TileLayer:zIndex

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

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

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

引入百度地圖：

在百度地圖還未加載完成時(shí)就調(diào)用了百度地圖的方法。
實(shí)現(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  
  
  }）

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