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

// Set a timer to detect when the map has finished loading
    const loadingInterval = setInterval(() => {
      if (this.map.loaded()) {
        clearInterval(loadingInterval);
        // For some reason, setCenter/setZoom commands that are called too soon are ignored.
        if (this.center) { this.map.setCenter(this.center); }
        if (this.zoom) { this.map.setZoom(this.zoom); }
        this.mapLoadedHandlers.forEach(h => h(this));
      }
    }, 100);

    // Add zoom and rotation controls to the map.
    const navigationControlOptions = {
      showCompass: false,
    };
    this.map.addControl(new mapboxgl.NavigationControl(navigationControlOptions));

    this.dragStartHandlers = [];
    this.dragHandlers = [];
    this.dragEndHandlers = [];
    this.mapLoadedHandlers = [];

    this.map.on('touchstart', (e) => {
      // the user actually touched the screen!
      // he has a touch feature AND is using it. See #1090
      if (!this.userIsUsingTouch) {
        this.userIsUsingTouch = true;
        console.log('user is using touch');
      }
    });

    this.map.on('mouseenter', 'clickable-zones-fill', (e) => {

function init() {
  mapboxgl.accessToken = MAPBOX_TOKEN;

  window.map = map = new mapboxgl.Map({
    trackResize: true,
    container: "map",
    minZoom: 1,
    style: getMarsStyle(),
    center: [-92.880, 18.79],
    zoom: 2.64,
    hash: true
  });

  map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), "top-right");

  map.on("zoomstart", hideHeights);
  map.on("zoomend", updateHeights);
  map.on("dragstart", hideHeights);
  map.on("dragend", updateHeights);
  map.on("load", function() {
    setLabelsVisible(appState.showLabels);
    schedulePrintMessage();
    // I was considering using native layers, to fetch the coordinates,
    // but my understanding of mapbox is not deep enough to do it yet.

    // map.showTileBoundaries = true;
    // map.addSource("dem", {
    //     type: "raster-dem",
    //     "url": "mapbox://anvaka.8ctdbgc9",
    //     "tileSize": 256,

}
            this.map.flyTo({
                center: flyToPos
            });

            this.reverseGeocode(result.result.center);
            
            // Hide UI
            // @todo refactor this to use React state
            document.querySelector('body').classList.remove('show-city-picker');
            cityPicker.clear();
        });
        this.map.addControl(cityPicker, 'top-left');

        this.map.addControl(
            new mapboxgl.NavigationControl({
                showCompass: false
            }),
            'bottom-right'
        );
        const geolocate = new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: false
        });
        geolocate.on('geolocate', result => {
            console.debug('geolocate', result); 
            this.reverseGeocode([result.coords.longitude, result.coords.latitude]);
        });
        this.map.addControl(geolocate, 'bottom-right');

function init() {
  // TODO: Do I need to hide this?
  mapboxgl.accessToken = 'pk.eyJ1IjoiYW52YWthIiwiYSI6ImNqaWUzZmhqYzA1OXMza213YXh2ZzdnOWcifQ.t5yext53zn1c9Ixd7Y41Dw';
  map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-122.2381,47.624],
      zoom: 11.32,
      hash: true
  });

  map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'bottom-right');
  map.addControl(new MapboxGeocoder({accessToken: mapboxgl.accessToken}));
  map.on('zoom', updateZoomWarning);

  map.dragRotate.disable();
  map.touchZoomRotate.disableRotation();

  // On large screens we want to warn people that they may end up downloading a lot of stuff
  updateZoomWarning();

  bus.on('download-all-roads', downloadRoads);
  bus.on('cancel-download-all-roads', () => {
    if (cancelDownload) cancelDownload();
  });
};

initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1Ijoid3VjYW5nZW8iLCJhIjoiY2oxNGQ1ZDdsMDA0djJxbzdzdGU4NWpqMiJ9.iaTLldYv7GNfxWhN42h__g";
      const map = new mapboxgl.Map({
        container: this.$refs.basicMapbox,
        style: CONFIG.HOST + "/style.json",
        center: [116.295, 39.945],
        zoom: 16
      });
      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);

      // 地图导航
      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
          },

import lonlat from '@conveyal/lonlat'
import mapboxgl from 'mapbox-gl'
import React from 'react'

import {POI_ID} from '../constants'

// Default NavigationControl
const navControl = new mapboxgl.NavigationControl({showCompass: false})

export default function useMap(mapProps, events, setMap) {
  const ref = React.useRef(null)

  // Runs on mount
  React.useEffect(() => {
    let accessToken = mapProps.accessToken || process.env.MAPBOX_ACCESS_TOKEN
    if (!accessToken) {
      const accessToken = window.prompt('Enter a Mapbox access token')
      mapProps.updateMap({accessToken})
    }
    mapboxgl.accessToken = accessToken

    // Create map
    const m = (window.map = new mapboxgl.Map({
      center: mapProps.center,

});

    map.on('style.load', () => {
      this._addMarkers();
      this._addLayers();
    });

    map.addControl(
      new mapboxgl.AttributionControl({
        compact: true,
        customAttribution: mapboxgl.accessToken
          ? '' // Included by mapbox
          : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      }),
    );
    map.addControl(new mapboxgl.NavigationControl({}));
    const {getFeaturePopoutContent, getFeatureHoverPopoutContent} = this.props;
    if (getFeaturePopoutContent || getFeatureHoverPopoutContent) {
      this.props.layers.forEach(layer =&gt; {
        if (this._getLayerStyles(layer)[CIRCLE_LAYER_STYLE]) {
          const layerId = `${layer.source.key}_${CIRCLE_LAYER_STYLE}`;
          this._registerClick(map, layerId);
        }
        if (this._getLayerStyles(layer)[ICON_LAYER_STYLE]) {
          const layerId = `${layer.source.key}_${ICON_LAYER_STYLE}`;
          this._registerClick(map, layerId);
        }
      });
    }
    this.setState({map}, this._fitBounds);
  }

'tileSize': 256
            }
          },
          'layers': [{
            'id': 'container',
            'type': 'raster',
            'source': 'main-map',
            'minzoom': 0,
            'maxzoom': 22
          }]
        },
        center: this.props.mapData.center,
        zoom: this.props.mapData.zoom
      });

    mainMap.addControl(new mapboxgl.NavigationControl(), 'top-left');
    // disable map rotation using right click + drag
    mainMap.dragRotate.disable();
    // disable map rotation using touch rotation gesture
    mainMap.touchZoomRotate.disableRotation();

    // Hack the controls to match the style.
    let controls = document.querySelector('.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group');
    controls.classList.add('button-group', 'button-group--vertical');
    controls.querySelector('.mapboxgl-ctrl-zoom-in').classList.add('button');
    controls.querySelector('.mapboxgl-ctrl-zoom-out').classList.add('button');
    controls.querySelector('.mapboxgl-ctrl-compass').remove();

    this.maps = [
      mainMap,
      this.loadMap('map--search-thumb0', 0),
      this.loadMap('map--search-thumb1', 2),

popup: new MapboxGl.Popup({
				closeButton: true,
				closeOnClick: false
			}),
			showInspectButton: false,
			showMapPopup: true,
			showMapPopupOnHover: false,
			showInspectMapPopupOnHover: false,
			renderPopup: this.renderPopup.bind(this)
		}));

		map.addControl(new MapboxGl.AttributionControl({
			compact: true
		}));

		const nav = new MapboxGl.NavigationControl();
		map.addControl(nav, 'top-right');

		console.log('version:',MapboxGl);

		map.on('error',(e)=>{
			console.error('map error:',e);
			if (e.sourceId){
				const error = {
					message:'sources.'+e.sourceId+'.url: error loading source'
				};
				return Mstyle.errorAdd(error);
			}
			Mstyle.errorAdd(e.error);
		});

		this.map = map;

mapObj.map.on('load', () => {
        mapObj.map.addControl(new mapboxgl.NavigationControl());
        mapObj.map.addControl(mapObj.draw);
      });