如何获得反应传单地图以平移到新中心？

如何解决如何获得反应传单地图以平移到新中心？

我正在使用与传单反应。当用户登陆页面时，当前位置被确定，然后地图以用户位置为中心呈现在地图上。

但是，在那之后，当我左右平移地图然后单击按钮再次确定我的位置（目的是重新定位）时，地图不会重新定位。我知道函数正在触发并且位置没有改变，所以我知道地图不会重新平移。

有没有办法重新渲染地图或强制它理解它已被平移，以便在触发位置功能时可以重新定位？或者也许我应该使用另一个使地图重心的传单功能？

以下是基本代码：

App.js

...
getCurrentLocation = async () => {
    console.log("attempting to get user location ...")
    navigator.geolocation.getCurrentPosition(position => {

      console.log('user is at',[position.coords.latitude,position.coords.longitude]);

      let newViewPort = {
        height: "100vh",width: "100vw",latitude: position.coords.latitude,longitude: position.coords.longitude,zoom: 14
      };

      this.setState({ viewPort: newViewPort });

    });
  }
...

            {/** MAP */}
            <div>
              {this.state.geojson && <Leaf
                data={this.state.data}
                getCurrentLocation={this.getCurrentLocation}
                viewPort={this.state.viewPort}
                geojson={this.state.geojson}
                showModal={this.state.showModal}
                closeModal={this.closeModal}
                toggleModal = {this.toggleModal}
              />}
            </div>

Leaf.js

   ...
    <Map
                center={[this.props.viewPort.latitude,this.props.viewPort.longitude]}
                zoom={this.props.viewPort.zoom}
                className={classes.map}
              >
    ...
    {/**GET CURRENT LOCATION */}
                <Control position="topleft" >
                  <button
                  className={classes.loc}})}
                  >           
                    <Image
                      
                      src={loc}
                      width="40"
                      height="40"
                      onClick={this.props.getCurrentLocation}
                    />  
                  </button>
                </Control>
    ...

解决方法

更改您的地图以保存参考，例如：

<Map ref={ref=>this.map=ref}
...

现在，使用此保存的引用，您将能够通过引用上的 Leaflet 属性调用 leafletElement 实例上的各种方法。

例如，以一个点为中心：

this.map.leafletElement.setView(new L.LatLng(position.coords.latitude,position.coords.longitude),this.props.viewPort.zoom);

调试技巧：

• 尝试用 setTimeout(code,100); 包装以避免困扰传单库的各种时间问题。