react-mapbox-gl _onClickGeolocate() 调用与 setTimeout 自动请求位置

Posted 2023-02-23

【中文标题】react-mapbox-gl _onClickGeolocate() 调用与 setTimeout 自动请求位置

【英文标题】：react-mapbox-gl _onClickGeolocate() call with setTimeout to request location automatically

【发布时间】：2017-12-11 15:21:24

【问题描述】：

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

我需要使用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;

【参考方案1】：

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

在此之后，将geolocate._onClickGeolocate 方法绑定到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;

【参考方案2】：

现在已经很晚了，但以下方法会起作用：

let geolocate = new mapboxgl.GeolocateControl(
      positionOptions: 
        enableHighAccuracy: true,
      ,
      trackUserLocation: true,
    );
    map.addControl(geolocate);

map.on("load", function () 
      geolocate.trigger();
    );