google地图去除右上角全屏按键，自定义按键全屏

很多时候，google地图控件的位置不是我们想要的，我百度时候发现，google地图好像没有将全屏按键作为一个单独的控件，也有可能是我没有查询到，下面是一个这样的需求，由于全屏按键被遮挡了，无法点击，现将按键移到右下角

先上效果图

具体代码如下

• 创建地图代码
  这里options中，添加了disableDefaultUI: true，这是将所有的空间去除，下面的则是将所有的控件添加回来，之所以这样做，是因为没找到全屏按键的单独设置，只能使用这种比较麻烦的方式进行
  zoomControl:true,
  mapTypeControl:true,
  scaleControl:true,
  streetViewControl:true,
  overviewMapControl:true,
  rotateControl:true

self.mapLoad().then((AMap: any) => {
        self.map = new AMap.Map(document.getElementById(options.container || ""), {
          zoom: options.zoom || 4,
          center: options.center || { lat: 36.1726, lng: -115.1727 },
          styles: options.styles,
          gestureHandling: 'greedy',
          disableDefaultUI: true,
          panControl:true,
          zoomControl:true,
          mapTypeControl:true,
          scaleControl:true,
          streetViewControl:true,
          overviewMapControl:true,
          rotateControl:true
        });
        // 获取地图元素
        const elementToSendFullscreen = self.map.getDiv().firstChild;
        // 获取全屏按键
        const fullScreenBtn = document.getElementById('fullScreenBtn');
        // 退出全屏按键
        const smallScreenBtn = document.getElementById('smallScreenBtn');
        // 全屏函数
        fullScreenBtn.addEventListener("click", () => {
          if (elementToSendFullscreen.requestFullscreen) {
            elementToSendFullscreen.requestFullscreen();
          } else if (elementToSendFullscreen.webkitRequestFullScreen) {
            elementToSendFullscreen.webkitRequestFullScreen();
          } else if (elementToSendFullscreen.mozRequestFullScreen) {
            elementToSendFullscreen.mozRequestFullScreen();
          } else if (elementToSendFullscreen.msRequestFullScreen) {
            elementToSendFullscreen.msRequestFullScreen();
          }
          fullScreenBtn.style.display = 'none'
          smallScreenBtn.style.display = 'flex'
        })
        // 退出全屏函数
        smallScreenBtn.addEventListener("click", () => {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          }
          fullScreenBtn.style.display = 'flex'
          smallScreenBtn.style.display = 'none'
        })
        // 添加控件集
        self.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullScreenBtn);
        self.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(smallScreenBtn);

• 按键的位置设置

  <div id="fullScreenBtn">
    <i nz-icon type="fullscreen" theme="outline"></i>
  </div>
  <div id="smallScreenBtn">
    <i nz-icon type="fullscreen-exit" theme="outline"></i>
  </div>
</div>

• scss样式
  需要注意的是，这里使用了好几个!important，这是因为fullScreenBtn 和smallScreenBtn与google地图的命名是一样的，需要添加!import确保起作用
  定位的位置根据自己实际情况即可，使用 的是fixed定位，可以自行参考，如果定位出错，可以在控制面板中按下F12按键进行搜索，即可定位自己的元素位置

  #fullScreenBtn {
    position: fixed !important;
    bottom: 25px !important;
    left: 200px !important;
    top: auto !important;
    right: auto !important;
    background-color: white;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 30px;
    }
  }
  #fullScreenBtn:hover {
    cursor: pointer;
  }
  #smallScreenBtn {
    position: fixed !important;
    bottom: 25px !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
    background-color: white;
    height: 40px;
    width: 40px;
    display: none;
    justify-content: center;
    align-items: center;
    i {
      font-size: 30px;
    }
  }
  #smallScreenBtn:hover {
    cursor: pointer;
  }