javascript - React-mapbox-gl _onClickGeolocate() 调用 setTimeout 自动请求位置

Question

我正在使用以下代码将GeolocateControl添加到我的react-mapbox-gl map 中。

我需要使用setTimeout()自动调用方法_onClickGeolocate方法，以在加载页面时自动请求用户位置。

我怎样才能实现这一目标？

import { Component } from "react";
import PropTypes from "prop-types";
import { accessToken } from "../../api/tokens/mapbox";
import mapboxgl from "mapbox-gl";

class Locater extends Component {
  static contextTypes = { map: PropTypes.object.isRequired };
  componentDidMount() {
    const { map } = this.context;

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

  render() {
    return null;
  }
}

export default Locater;

Answer 1

为此，请为geoclocate 控件创建一个新变量，并将这个新创建的变量传递到您的map.addControl 方法中。

接下来，将 geolocate._onClickGeolocate 方法绑定(bind)到 setTimeout() 方法中的 geolocate 变量。

这将自动为您调用 _onClickGeolocate 方法。

import {Component } from "react";
import PropTypes from "prop-types";
import { accessToken } from "../../api/tokens/mapbox";
import mapboxgl from "mapbox-gl";

class Locator extends Component {
  static contextTypes = { map: PropTypes.object.isRequired };


  componentDidMount() {
    const { map } = this.context;

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

    map.addControl(
      geolocate
    );
  setTimeout(geolocate._onClickGeolocate.bind(geolocate), 5)
  }


  render() {
    return null;
  }
}

export default Locator;