echarts-extension-gmap 踩坑

一、非全屏使用组件，放大后图表遮罩

1. 使用 echarts-extension-gmap

echarts-extension-gmap 是基于 Google Map API 的地图组件。扩展 goole 地图功能，如：添加坐标点，图表等。
使用方法参考：echarts-extension-gmap

2. echarts-extension-gmap 绘制坐标点、图标。

通过调试，发现 echarts-extension-gmap 在 Google Map 图层上额外增加了一个 Canvas，
并在新增 Canvas 上进行坐标点、图标绘制。

3. 出现的问题

Gmap 在非全屏状态使用，加载完成后，点击 Gmpa 右上角全屏按钮，绘制的坐标点和图表会被遮罩。
原因： Gmap 放大后触发重排重绘，但是没有对 Canvas 图层进行重绘。

二、找到问题

1. Gmap 容器在渲染完成后会增加默认样式

Gmap 初始化后，容器会被添加 position: relative; 等样式。有些会影响 canvas 的展开，需要更改。

三、解决方法

1. 找打 Gmap 判定全屏事件 API

Google Map API 中提供了 idle 事件监听（空闲事件），可以利用 Goolgle Map .gm-style 元素大小与 window 大小比较，来判定是否切换了全屏。

2. 全屏回调中重绘 Canvas

1. 修改 Gmap 容器样式 position: fixed;
2. 全屏回调中调用 eachart.resize()，对 Canvas 元素重绘 。此时 Canvas 重新计算父容器宽高，与 window 大小一致。

四、代码实现

1. 首先定义 Gmap 容器

<template>
  <div id='gMap'></div>
</template>

2. 添加 idle 事件监听，全屏事件中 resize

// Idle 事件
this.gmap = this.chart.getModel().getComponent('gmap').getGoogleMap()
this.gmap.addListener('idle', () => {
  const domGmstyle = document.getElementsByClassName('gm-style')[0] as HTMLDivElement
  const domGmwrap = document.getElementById('gMap') as HTMLDivElement
  if(domGmstyle.offsetHeight === window.innerHeight 
    && domGmstyle.offsetWidth === window.innerWidth
  ){ // 全屏
    domGmwrap.style.position = 'fixed'
    this.chart.resize()
  }
})

五、参考

1. Google Map API