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

如何解决Mapbox 和 React：无法在搜索框中输入值

我在一个项目中使用了 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>

我的问题：我无法点击搜索栏。这可以通过搜索栏在其 {{1}} 中的奇怪定位来体现。有没有办法放置组件以便搜索栏可点击？我认为 div 组件没有问题，因为 this 示例中的代码运行良好。

解决方法

按照官方 react-map-gl-geocoder repo 您可以使用 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>
);