Mapbox 和 React：无法将值输入搜索框

Question

我在项目中使用 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 示例中的代码工作正常。

Answer 1

按照官方的react-map-gl-geocoder repo you can use 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>
);

Mapbox 和 React：无法将值输入搜索框

Mapbox & React: Unable to input values into search box

reactjs

mapbox

mapbox-gl-js

deck.gl

react-map-gl