时间戳

首页 > 解决方案 > 使用 react-mapbox-gl 的 fitBounds 定位到特定边界

reactjs - 使用 react-mapbox-gl 的 fitBounds 定位到特定边界

问题描述

我想让地图重新定位到按钮单击事件的常量绑定。加载页面时，它显示我得到正确计算的界限的界限。加载后，我需要导航到我绘制的标记。导航到几个标记后，需要飞到我首先得到的原始边界。但它位于伦敦市。我不确定为什么它没有重新定位到原始边界。

这是我的代码

<CustomMapbox
    showAll={this.state.showAll}
    center={this.state.center}
    fitBounds={this.state.bound}
    zoom={[8]}
    containerStyle={{
       height: "100%"
    }} onClick={this.onClickMap}
>
     <Marker
        locations={this.state.places}
        data={this.state.product}
        onClick={this.onClickPosition} 
     />

      { (this.state.selectedPoint ) && (this.state.showPopup) &&
         <Popup key={`${this.state.selectedPoint[0]}_${this.state.selectedPoint[1]}`} coordinates={this.state.selectedPoint}>
              <StyledPopup>
                <div>{this.state.selectedUPCDate}</div>
              </StyledPopup>
         </Popup>
                }
</CustomMapbox>

如您所见，我正在使用CustomMapbox组件和道具，例如showAll, center,fitBounds用于 Map。 showAll是否显示所有标记。当showAll为真时，需要显示所有标记，因此需要显示带有 的区域fitBound。当showAll为假时，需要显示中心点。

我通过变量CustomMapbox选择了正确的道具。showAll在CustomMapbox中，如果showAll为真，center道具将被移除，或者，fitBounds道具将被移除。问题是在页面加载时正确显示此区域，但在导航到特定中心后未显示。

是否有任何解决方案可以使用此功能react-mapbox-gl？

标签： reactjsmapboxreact-map-gl

解决方案

每个人！我自己解决了。使用 fitBounds 时，需要使用该边界的中心。它现在运行良好

不需要使用showAll标志fitBounds 只需要使用fitBounds和它的center值

推荐阅读