百度地圖開發實例番外篇--實用方法（持續更新）

一 前言

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

二 正文

1.設置徹底透明

測試實例：多邊形(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('');//設置多邊形填充徹底透明

2.添加地面疊加層

測試實例：地面疊加層(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');

3.跟隨地圖放縮

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

4.覆蓋物重疊時的層級顯示問題

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

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

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

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

5.在vue中使用外鏈的百度地圖

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

引入百度地圖：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰">

解決Eslint對BMap等地圖相關變量報錯的問題：

.eslintrc文件：

module.exports = {
 ... ...
    "globals": {
      //爲百度地圖設置規則
      "BMap": true,
      "BMAP_NORMAL_MAP": true,
      "BMAP_HYBRID_MAP":true,
      "BMAP_ANCHOR_TOP_LEFT":true,
      "BMAP_ANCHOR_TOP_RIGHT":true,
      ...
  },
}

先看看普通使用方式（沒有使用異步加載）帶來的錯誤：

在百度地圖還未加載完成時就調用了百度地圖的方法。
實現方案：相似於異步加載

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方法設置本身的層級。但願百度地圖可以愈來愈強大，這樣開發者就能夠愉快的開發了～