vue+iview+typescript+echarts+百度地圖【echarts與百度地圖的混合使用】遇到的問題

  版本說明： vue：2.6+，iview：3.4+， vuex：3.0+，   

 1、echarts的引入：npm install --save ， vue頁面中：import echarts from 'echarts'；

 2、百度地圖的引入：首先在百度地圖API官網申請key，然後在index.html中引入：

接着在vue.config.js中的module.exports={}中添加一下代碼，若不添加會出問題，BMap is undefined：

configureWebpack: {
  externals: {
    "BMap": "BMap",
  },
},

最後在使用百度地圖的vue文件中引入：import BMap from 'BMap'; （可有可無）  require('echarts/extension/bmap/bmap');（必須有）。

 3、初始化echarts

html：（class="bdMap"設置地圖的寬高，沒有寬高地圖不顯示）

<div class="bdMap" id="bdMap"></div>

ts：
const mapDom = document.getElementById('bdMap') as HTMLCanvasElement;
let myMap;
if (mapDom) {
  myMap = echarts.init(mapDom);
}
let option = {
  bmap: {
    roam: true, // 用戶是否可以拖拽和縮放地圖
    opt: {
      enableMapClick: false,
    },
    mapStyle: { // 設置地圖的樣式
      styleJson: [
        {
          "featureType": "poi",
          "elementType": "all",
          "stylers": {
            "visibility": "off"
          }
        },
        {
          "featureType": "railway",
          "elementType": "all",
          "stylers": {
            "visibility": "off"
          }
        },
        {
          "featureType": "local",
          "elementType": "all",
          "stylers": {
            "visibility": "off"
          }
        },
        {
          "featureType": "subway",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }
      ]
    },
  },
  series: [],
};
myMap.setOption(option, true);

 4、在地圖上畫區域

let bmap = myMap.getModel().getComponent('bmap').getBMap(); // 獲取bmap的實例

bmap.centerAndZoom(new BMap.Point(121.482249, 31.223212), 15); // 設置地圖初始化時的中心點及縮放級別

let polygon = new BMap.Polygon(point, {strokeWeight: 2, strokeColor: '#ff0000'});  // 建立多邊形覆蓋物  

bmap.addOverlay(polygon);  // 畫區域時 如果座標點是多個數組 則遍歷數組並將polygon一一添加到map中

注：如果在每次進入地圖的時候，需要重新繪製區域【比如地圖需要根據選擇的內容不同展示不同的區域】

let overlayList = bmap.getOverlays(); // 獲取到地圖上所有覆蓋物

for (let lay = 0, layLen = overlayList.length; lay < layLen; lay++) {  // 遍歷這些覆蓋物並根據條件移除覆蓋物

    if (overlayList[lay].zo) {  // 判斷這些覆蓋物是polygon區域  也可以判斷Label(content且content不爲'shadow')、Marker(Bc) 【可根據自己愛好選擇判斷條件】

        bmap.removeOverlay(overlay[lay]); // 清除符合條件的覆蓋物，不建議將所有的覆蓋物一起清除，因爲會將地圖默認的覆蓋物清除，其他的功能會受影響

    }

}

不建議直接使用clearOverlay() ， 因爲將所有的覆蓋物清除，可能會影響地圖的層級關係，在拖拽的時候報錯，儘管可以正常使用。

5、給地圖添加點擊功能，對Marker點擊需要彈出對應的信息，因此需要區分點擊的是地圖還是Marker。點擊事件e.overlay是null的時候，點擊的是地圖；點擊事件e.overlay是undefined的時候，點擊的是Marker。

以上是最近遇到過的問題及使用過的功能。