GeoCoder 与 React mapBox-gl 一起使用时会导致一些错误消息

问题描述

我正在尝试将 GeoCoder 添加到 mapBox-gl - 添加 geoCoder 导致了一些错误，我的代码是

import './map.scss';
import React,{ useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import ReactMapGL,{ Marker,Source,layer } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import 'react-map-gl-geocoder/dist/mapbox-gl-geocoder.css';
import Geocoder from 'react-map-gl-geocoder';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import DropoffPinWithLayer  from '../../pages/Routing/Components/Pins/dropoffWithLayer'

const Map = (props) => {
  let ZoomCustomer,MarkAllCustomers,GeocoderTag,SearchBarRefrence;
  const geocoderContainerRef = React.useRef();
  const mapRef = useRef();
 
   if(props.isSearchOutOfMap === true) {
    SearchBarRefrence = (<div ref={geocoderContainerRef} />);
   }

  if (props.geocoder == true) {
    GeocoderTag = (
      <Geocoder
        containerRef={geocoderContainerRef}
        mapRef={mapRef}
        onViewportChange={props.handleGeocoderViewportChange}
        mapboxApiAccessToken={mapboxgl.accessToken}
        position={props.position}
        onResult={props.handleOnResult}
        ReverseGeoCode={true}
        onClear={props.handleOnClear}
      />
    );
  }
  if (props.customerToZoom == true) {
    ZoomCustomer = (
      <Marker latitude={props.customerToMark.lat} longitude={props.customerToMark.lon} >
        {props.marker}
      </Marker>
    );
  }
  if (props.customerToZoom == true && props.itsDraggable === true) {
     
    ZoomCustomer = (
      <DropoffPinWithLayer
        location={ props.customerToMark }
        onDragEnd={props.handleOnDragEnd}
        radius={props.radius}
      />
    );
  }

  if (props.markCustomers == true) {
    let customers = props.customers;
    MarkAllCustomers = customers.map((customer) => {
      const { lon,lat,uuid } = customer;
      if (props.customerArr) {
        return (
          <Marker key={uuid} longitude={lon} latitude={lat}>
            <i
              type="button"
              className={clsx(props.styles.pin,{ [props.styles.selected]: props.customerArr.includes(customer) })}
              onMouseDown={() => props.mouseDown(customer)}
            />
          </Marker>
        );
      } else if (props.selcustomers) {
        return (
          <Marker key={uuid} longitude={lon} latitude={lat}>
            <i
              type="button"
              className={clsx(props.styles.pin,{ [props.styles.selected]: customer.name === props.selCustomer })}
              onMouseDown={() => props.mouseDown(customer.name)}
            />
          </Marker>
        );
      }
    });
  }

  return (
    <div>
  {SearchBarRefrence}
    <ReactMapGL
      {...props.viewport}
      ref={mapRef}
      width={props.width}
      onClick={(event) => {
        props.handleOnClickEnd(event)
      }}
      height={props.height}
      onViewportChange={props.handleViewportChange}
      mapboxApiAccessToken={mapboxgl.accessToken}
      mapStyle="mapbox://styles/mapbox/outdoors-v11"
      >
      {ZoomCustomer}
      {MarkAllCustomers}
      {GeocoderTag}
    </ReactMapGL>
    
    </div>
  );
};

Map.propTypes = {
  width: PropTypes.string,onViewportChange: PropTypes.func,mapboxApiAccessToken: PropTypes.string,onResult: PropTypes.func,onClear: PropTypes.func,position: PropTypes.string,itsDraggable: PropTypes.bool,handleOnDragEnd: PropTypes.func,radius: PropTypes.number,height: PropTypes.string,handleOnClickEnd: PropTypes.func,};

Map.defaultProps = {
  width: '100px',handleOnClickEnd: (event) => {console.log(event)},handleOnDragEnd: () => {},onViewportChange: () => {},onResult: () => {},onClear: () => {},mapboxApiAccessToken: '',position: 'top-left',itsDraggable: false,radius: 0,height: "220px"
};

export default Map;

关于这些问题的任何想法请 我遇到的问题是： 类型错误：无法读取未定义的属性“删除” 类型错误：无法读取 null 的属性“addControl” 0

我问这个是因为我已经在 mapBox API 中完成了这个，但到目前为止还没有在 Mapbox API 上找到任何相关文档

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）