Mapbox 和 React：无法在搜索框中输入值答案

【问题标题】：Mapbox & React: Unable to input values into search boxMapbox 和 React：无法在搜索框中输入值
【发布时间】：2021-07-21 17:33:39
【问题描述】：

我在一个项目中使用了 React/Mapbox（更具体地说是 DeckGL）的组合。我想包括用于查询地址的地理编码。

我目前的输出：

使用此代码生成：

<DeckGL {...deckGLProps} ref={deckRef}>
        <StaticMap
          ref={mapRef}
          {...staticMapProps}
        />
        <div style={{ border: '5px solid black', top: 500, display: 'inline-block', zIndex: '9999'}}>
          <Geocoder
            mapRef={mapRef}
            onViewportChange={handleGeocoderViewportChange}
            mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
            position="top-left"
            minLength={1}
            trackProximity={true}
            countries={"us"}
            reverseGeocode={true}
            enableEventLogging={false}
          />
        </div>
      </DeckGL>

我的问题：我无法点击搜索栏。搜索栏在其div 中的奇怪位置表明了这一点。有没有办法放置组件以使搜索栏可点击？我认为Geocoder 组件没有问题，因为this 示例中的代码可以正常工作。

【问题讨论】：

标签： reactjs mapbox mapbox-gl-js deck.gl react-map-gl

【解决方案1】：

按照官方的react-map-gl-geocoderrepo，您可以使用containerRef prop 将地理编码器放置在地图之外（或任何您想要的，注意position: absolute css prop）：

Example:

const geocoderContainerRef = useRef();

// render
return (
  <div>
    <div
      ref={this.geocoderContainerRef}
      style={{
        position: 'absolute',
        top: 50,
        left: 50
      }}
    />
    <MapGL
      ref={this.mapRef}
      {...viewport}
      onViewportChange={this.handleViewportChange}
      mapboxApiAccessToken={MAPBOX_TOKEN}
    >
      <Geocoder
        mapRef={this.mapRef}
        containerRef={this.geocoderContainerRef}
        onResult={this.handleOnResult}
        onViewportChange={this.handleGeocoderViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />
      <DeckGL {...viewport} layers={[searchResultLayer]} />
    </MapGL>
  </div>
);

【讨论】：