Mapbox-gl 渲染标记的问题

Question

我正在开发一个卡车租赁系统，我想在其中渲染源位置和目的地位置的标记，并在地图的右上角显示这两点之间的距离。 我能够正确获取这两个位置的坐标并正确计算距离，但是 mapboxgl 的标记：两个位置上的 mapboxgl.Marker() 不可见。我该如何解决这个问题？

我写了下面的代码供参考：

import * as React from "react";
import "./renderMap.css";
import mapboxgl from "mapbox-gl";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";

mapboxgl.accessToken =
  "{my-access-token}";

export default function RenderMap(props) {
  console.log("props are : ",props);

  const queryString = window.location.search;
  const urlSearchParams = new URLSearchParams(queryString);
  const addresses = urlSearchParams.getAll('addresses');

  var address1 = addresses[0];
  var address2 = addresses[1];
  
  console.log(address1,address2);

  var area1,area2,city1,city2,state1,state2,country1,country2;

  var address1_parts = address1.split(",");
  area1 = address1_parts[0];
  city1 = address1_parts[1];
  state1 = address1_parts[2];
  country1 = address1_parts[3];

  var address2_parts = address2.split(",");
  area2 = address2_parts[0];
  city2 = address2_parts[1];
  state2 = address2_parts[2];
  country2 = address2_parts[3];

  const [to, setTo] = React.useState(null);
  const [from, setFrom] = React.useState(null);
  const [distance, setDistance] = React.useState(null);

  async function get_val() {
    console.log("entry");
    const res = await fetch(
      `http://api.positionstack.com/v1/forward?access_key={myaccesskey}&query=1600 ${area1} ${city1} ${state1} ${country1}`,
      {
        method: "GET",
      }
    )
    const resp = await res.json();
    const toPoint = [resp.data[0].longitude, resp.data[0].latitude];
    setTo(toPoint);
    const res2 = await fetch(
      `http://api.positionstack.com/v1/forward?access_key={myaccesskey}&query=1600 ${area2} ${city2} ${state2} ${country2}`,
      {
        method: "GET",
      }
    )
    const resp2 = await res2.json();
    const fromPoint = [resp2.data[0].longitude, resp2.data[0].latitude];
    setFrom(fromPoint);

    const options = { units: "miles" };

    const res3 = await fetch(
      `https://dev.virtualearth.net/REST/v1/Routes/DistanceMatrix?origins=${resp.data[0].latitude},${resp.data[0].longitude}&destinations=${resp2.data[0].latitude},${resp2.data[0].longitude}&travelMode=driving&key={mykey}`,
      {
        method: "GET",
      }
    )
    const resp3 = await res3.json();
    console.log(resp3.resourceSets[0].resources[0].results[0].travelDistance);
    setDistance(resp3.resourceSets[0].resources[0].results[0].travelDistance);
    console.log("exit");
    console.log(toPoint, fromPoint,distance);
  }

  React.useEffect(() => {
    var map = new mapboxgl.Map({
      container: "map", // container id
      style: "mapbox://styles/mapbox/streets-v11",
      center: [79.384, 21.101],
      zoom: 5,
    });

    map.on("load", () => {
      if(to && from)
      {
      var greenMarker = new mapboxgl.Marker({
        color: "green",
      })
        .setLngLat(to)
        .addTo(map);

      var purpleMarker = new mapboxgl.Marker({
        color: "purple",
      })
        .setLngLat(from) // marker position using variable 'from'
        .addTo(map); //add marker to map
    }
    });

    console.log(distance);

    if(distance !== null)
    {
      var value = document.getElementById("map-overlay");
      value.innerHTML = "Distance: " + distance.toFixed([2]) + " miles";
    }
    
    get_val();
  }, [distance]);

  return (
    <div id="map-container">
      <div id="map"></div>
      <div id="map-overlay">Distance: </div>
    </div>
  );
}

任何解决错误的帮助将不胜感激。