How to use the mapbox-gl.GeolocateControl function in mapbox-gl

// 地图导航
      var nav = new mapboxgl.NavigationControl();
      map.addControl(nav, "top-left");
      // 比例尺
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "imperial"
      });
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      //添加绘制功能
      var modes = MapboxDraw.modes;
      modes.draw_rectangle = DrawRectangle;

      var draw = new MapboxDraw({
        modes: modes
      });
      map.addControl(draw);

      map.on("draw.create", feature => {

private initMap(config: MapConfig) {
    this.mapboxMap = createMapboxMap(this.mapElementId, config);
    this.mapboxMap.addControl(new NavigationControl(), 'top-right');
    this.mapboxMap.addControl(new ScaleControl(), 'bottom-right');
    // GeolocateControl needs to be added after ScaleControl to be shown above it
    this.mapboxMap.addControl(new GeolocateControl(), 'bottom-right');

    this.registerMapEventListeners();
    this.fixDefaultMapZoomRate();
  }

bounds: [lowerLong, lowerLat, upperLong, upperLat],
});
if (!isImmersive) {
  map.fitBounds([lowerLong, lowerLat, upperLong, upperLat], {
    animate: false,
    padding: window.innerWidth > 480 && window.innerHeight > 480 ? 120 : 0,
  });
}

// Controls
if (!isImmersive){
  map.addControl(new mapboxgl.AttributionControl({
    compact: true
  }), 'top-right');
  map.addControl(new mapboxgl.NavigationControl(), 'top-right');
  map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true,
    },
    trackUserLocation: true,
  }));
}

// Pitch control
class PitchControl {
  onAdd(map) {
    this._map = map;
    const container = document.createElement('div');
    container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
    container.innerHTML = '<button type="button" class="mapboxgl-ctrl-icon mapboxgl-ctrl-custom-pitch"><span>3D</span></button>';
    container.onclick = function(){
      var pitch = map.getPitch();

handleMapLoad(map) {
    window.map = map;
    this.set('mapInstance', map);

    const navigationControl = new mapboxgl.NavigationControl();
    map.addControl(navigationControl, 'top-left');

    const geoLocateControl = new mapboxgl.GeolocateControl({
      positionOptions: {
        enableHighAccuracy: true,
      },
      trackUserLocation: true,
    });
    map.addControl(geoLocateControl, 'top-left');

    this.resultMapEvents.on('hover', this, 'hoverPoint');
    this.resultMapEvents.on('unhover', this, 'unHoverPoint');
    this.resultMapEvents.on('click', this, 'clickPoint');

    this.updateTileState.perform(map);
  }

Map(options: Object) {
		this.assign(mapbox, "accessToken", this.accessToken);

		this.map = new mapbox.Map(options);
		this.map.addControl(new mapbox.NavigationControl());
		this.map.addControl(new mapbox.GeolocateControl());

		return true; 
    }

const onMapLoad = (map: mapboxgl.Map) => {
		map.on('move', () => {
			const { lng, lat } = map.getCenter();
			setState({
				lng: lng.toFixed(4),
				lat: lat.toFixed(4),
				zoom: map.getZoom().toFixed(2)
			});
		});

		map.addControl(
			new mapboxgl.GeolocateControl({
				positionOptions: {
					enableHighAccuracy: true
				},
				trackUserLocation: true
			})
		);
	};

addGeolocationControl: position => {
      geolocationControl = new mapboxgl.GeolocateControl();
      map.addControl(geolocationControl, position);
    },

this.map = new mapboxgl.Map({
      container: this.elMap,
      style: `mapbox://styles/mapbox/${this.props.style.background}-v9`,
      center: [lng, lat],
      zoom
    });

    this.setState({ loaded: true });

    this.map.addControl(
      new mapboxgl.NavigationControl({
        showCompass: false
      })
    );

    const geolocate = new mapboxgl.GeolocateControl({
      positionOptions: {
        enableHighAccuracy: true
      },
      trackUserLocation: true
    });

    this.map.addControl(geolocate);

    const geocoder = new mapboxglGeoconder({
      accessToken: mapboxgl.accessToken,
      flyTo: false
    });

    geocoder.on("result", e => {
      if (e.result && e.result.center) {
        this.map.flyTo({

showZoom: withZoom
        }),
        "top-right"
      );
    }

    if (withFullscreen) {
      mapInstance.current.addControl(
        new mapboxgl.FullscreenControl(),
        "top-right"
      );
    }

    if (withGeolocateControl) {
      mapInstance.current.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        }),
        "top-right"
      );
    }
  };