react腾讯地图

Older children:
import React, { useEffect } from 'react';
// https://lbs.qq.com/faq/webFaq/jsApiGl
import React, { useEffect } from 'react';
// https://lbs.qq.com/faq/webFaq/jsApiGl
export default function Index() {
  const handleMap = () => {
    console.log('window', window);

    const windowMap: any = window;
    //     console.log(window);

    const BMTMap = windowMap.TMap;
    var center = new BMTMap.LatLng(29.78013, 121.9664);
    var map = new BMTMap.Map('container', {
      rotation: 20, //设置地图旋转角度
      pitch: 30, //设置俯仰角度（0~45）
      zoom: 12, //设置地图缩放级别
      center: center //设置地图中心点坐标
    });
    var position: any = document.getElementById('position');
    var bounds: any = document.getElementById('bounds');
    map.on('bounds_changed', function () {
      var mapCenter = map.getCenter(); //获取地图中心点坐标
      position.innerHTML = mapCenter.getLat().toFixed(6) + ',' + mapCenter.getLng().toFixed(6);
      var mapBounds = map.getBounds(); //获取当前地图的视野范围
      if (mapBounds) {
        var nothEast =
          '当前可视区域范围：东北/右上:[' +
          mapBounds.getNorthEast().getLat().toFixed(6) +
          ',' +
          mapBounds.getNorthEast().getLng().toFixed(6) +
          '] ；';
        var southWest =
          '西南/左下:[' +
          mapBounds.getSouthWest().getLat().toFixed(6) +
          ',' +
          mapBounds.getSouthWest().getLng().toFixed(6) +
          ']';
        bounds.innerHTML = nothEast + southWest;
      }
    });
    let info = new BMTMap.InfoWindow({
        map,
        position: map.getCenter()
      }).close();
      map.on('click', (evt:any) => {
        // 获取click事件返回的poi信息
        let poi = evt.poi;
        if (poi) {
          // 拾取到POI
          info.setContent(poi.name).setPosition(poi.latLng).open();
        } else {
          // 没有拾取到POI
          info.close();
        }
      });
      var infoWindow = new BMTMap.InfoWindow({
        map: map,
        position: center, //设置信息框位置
        content: 'Hello World!', //设置信息框内容
    });
  };
  useEffect(() => {
    handleMap();
  }, []);
  return (
    <div>
      <div
        style={{ position: 'relative', width: '100%', height: '1000px', border: '1px solid red' }}
        id="container"
      >
        <div
          style={{
            backgroundColor: '#ccc',
            top: '20px',
            height: '50px',
            position: 'absolute',
            border: '1px solid red'
          }}
          id="position"
        ></div>
        <div
          style={{
            backgroundColor: '#ccc',
            top: '50px',
            position: 'absolute',
            border: '1px solid red'
          }}
          id="bounds"
        >
          点击
        </div>
      </div>
    </div>
  );
}
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>