Javascript 无法移动位置并创建标记映射框

此代码用于使用用户引入的值创建一个标记，并使该标记固定。 但我甚至不能创建标记，什么都没有发生

渲染后会将其粘贴到初始位置。我教过也许这是一个lat和lng订单，但我试过了，它一直在加载。 我也尝试删除flyTo，但没有任何更改

  export default function Map() {
    
    const mapContainer = useRef(null);
    const [lng, setLng] = useState(-70.9);
    const [lat, setLat] = useState(42.35);
    const [zoom, setZoom] = useState(9);
  
    const [searchValue, setSearchValue] = useState("");
  
  
    useEffect(() => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
         center: [lng, lat],
        zoom: zoom,
      });
      map.addControl(new mapboxgl.NavigationControl(), "top-right");
      map.on("move", () => {
        setLng(map.getCenter().lng.toFixed(4));
        setLat(map.getCenter().lat.toFixed(4));
        setZoom(map.getZoom().toFixed(2));
      });
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
  
    function getCoordinates(placesContent) {
      const { center, place_name } = placesContent.features[0];
      return {
        coordinates: center.reverse(),
        name: place_name,
      };
    }
    const changeMapCenter = async () => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
         style: "mapbox://styles/mapbox/streets-v11",
        center: [lng, lat],
        zoom: zoom,
      });
      return fetch(
        `${MAPBOX_PLACES_API}${searchValue}${REST_PLACES_URL}`,
        FETCH_HEADERS
      )
        .then((res) => res.json())
        .then((apiData) => {
          console.log("apidata=>", apiData);
          const { coordinates } = getCoordinates(apiData);
          console.log("coordinates=>", coordinates);
          map.flyTo(coordinates);
          new mapboxgl.Marker().setLngLat(coordinates).addTo(map);
        });
    };
    const handleChange = (event) => {
      setSearchValue(event.target.value);
    };
    return (
      <div className="mapBox">
        <div className="sidebar">
          Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
          <div>
            <label>create your spot collection</label>
            <input
              type="text"
              id="spotLocation"
              onChange={handleChange}
              value={searchValue}
            />
            <button onClick={changeMapCenter}>search and create </button>
          </div>
        </div>
        <div className="map-container" ref={mapContainer} />
      </div>
    );
  }

导出默认函数映射（）{
const mapContainer=useRef（null）；
const[lng，setLng]=使用状态（-70.9）；
const[lat，setLat]=使用状态（42.35）；
const[zoom，setZoom]=useState（9）；
常量[searchValue，setSearchValue]=useState（“”）；
useffect（（）=>{
常量映射=新的mapboxgl.map({
容器：mapContainer.current，
样式：“mapbox://styles/mapbox/streets-v11",
中心：[液化天然气，拉丁美洲]，
缩放：缩放，
});
addControl（新的mapboxgl.NavigationControl（），“右上”）；
map.on（“移动”，（）=>{
setLng（map.getCenter（）.lng.toFixed（4））；
setLat（map.getCenter（）.lat.toFixed（4））；
setZoom（map.getZoom（）.toFixed（2））；
});
}，[]）；//eslint禁用行反应挂钩/deps
函数getCoordinates（placesContent）{
const{center，place_name}=placesContent.features[0]；
返回{
坐标：center.reverse（），
名称：地名，
};
}
const changeMapCenter=async（）=>{
常量映射=新的mapboxgl.map({
容器：mapContainer.current，
样式：“mapbox://styles/mapbox/streets-v11",
中心：[液化天然气，拉丁美洲]，
缩放：缩放，
});
回传(
`${MAPBOX\u PLACES\u API}${searchValue}${REST\u PLACES\u URL}`，
获取标题
)
.然后（（res）=>res.json（））
.然后（（apiData）=>{
log（“apidata=>”，apidata）；
const{coordinates}=getCoordinates（apiData）；
log（“坐标=>”，坐标）；
地图.飞行图（坐标）；
新的mapboxgl.Marker（）.setLngLat（坐标）.addTo（地图）；
});
};
常量handleChange=（事件）=>{
setSearchValue（事件目标值）；
};
返回(
经度：{lng}纬度：{lat}缩放：{Zoom}
创建您的现货集合
搜索和创建
);
}

尝试在状态下保存地图并使用

setCenter

 const [ customMap, setMap ] = useState({ lat: 0, lng: 0}) // set your own initial value

 useEffect(() => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11",
         center: [lng, lat],
        zoom: zoom,
      });
      map.addControl(new mapboxgl.NavigationControl(), "top-right");
      map.on("move", () => {
        setLng(map.getCenter().lng.toFixed(4));
        setLat(map.getCenter().lat.toFixed(4));
        setZoom(map.getZoom().toFixed(2));
      });
      setMap(map);
    }, []);


    const handleChange = (event) => {
      // i assume event.target.value contains the coordinates
      // example 929292, 2929292
      setSearchValue(event.target.value)
    };
    const onSubmit = () => {
         let coordinates = searchValue.split(',')
         customMap.setCenter({ lat: coordinates[0], lng: coordinates[1]});
    }

---

@例如，我这样做并得到一个错误：Uncaught error:`

LngLatLike

参数必须指定为LngLat实例、对象{lng:，lat:}、对象{lon:，lat:}，或[，]`数组，我有一个问题，seacrhValue我仍然需要它，如果我不使用setSearchValue，我如何更改它？您需要使用

常量[customMap，setMap]=useState（{lng:292929，lat:99292}）//初始值

然后在handleChange中，您需要使用lat更新对象，lngi使用一个非常粗略的示例更新了答案，您可以自己对其进行优化，例如使用lng和lat的两个输入字段，并相应地更新它们。这不起作用，无论如何感谢@SomeoneSpecialit的工作，但现在发生了什么我必须单击两次才能在目标中获得标记。在到达目标之前，它将在同一位置渲染。谢谢