React集成Google Maps Distance Matrix报错：locations.join不是函数求助

Hey there! Let's work through your problem together—first that annoying error, then some React-friendly alternatives to make your life easier.

That error is telling you one clear thing: the locations variable you're passing to formatLocations isn't an array. The join() method only works on arrays, so if locations is a string, undefined, or an object, you'll get this exact TypeError.

Since you're using the google-distance-matrix package, it expects locations to be an array of address strings (like ['Paris, France', 'London, UK']). Here's how to fix this:

1. Double-check your state values: Make sure address and dest in your state are valid strings, not empty or undefined.
2. Pass an array to the matrix method: When calling the package's methods, combine your start and end addresses into an array first.

Here's a quick example of how to adjust your component method:

// Inside your View component
calculateDistance = () => {
  const { address, dest } = this.state;
  
  // Guard clause: don't run if addresses are empty
  if (!address.trim() || !dest.trim()) {
    this.setState({ distanceText: "Please enter both addresses" });
    return;
  }

  // Create an array of locations (origin + destination)
  const locations = [address, dest];
  
  GoogleMap.key = "YOUR_GOOGLE_API_KEY"; // Don't forget to add your API key!
  GoogleMap.matrix(locations, locations, (err, response) => {
    if (err) {
      console.error("Error fetching distance:", err);
      this.setState({ distanceText: "Failed to get distance" });
      return;
    }

    if (response.status === "OK") {
      const distanceData = response.rows[0].elements[0];
      if (distanceData.status === "OK") {
        this.setState({
          distanceText: distanceData.distance.text,
          foundDistance: true
        });
      } else {
        this.setState({ distanceText: "Could not calculate distance for these locations" });
      }
    }
  });
};

If you're still unsure, add a console.log(locations) right before calling formatLocations or matrix()—this will show you exactly what type of value you're working with, which makes debugging way easier.

If you want a more React-native approach (or just prefer not to use a third-party npm package), here are some solid options:

• Directly use the Google Maps JavaScript API
  This gives you full control without relying on external packages. You can load the API script in your component (using useEffect for functional components, or componentDidMount for class components) and call the Distance Matrix Service directly. It's straightforward and works with all React versions.

• @react-google-maps/api
  This is the official, actively maintained React wrapper for Google Maps APIs. It supports Hooks, functional components, and all Google Maps services—including Distance Matrix. It's more idiomatic for modern React development than older libraries.

• react-google-maps
  A popular older wrapper, though note that it's less actively updated than @react-google-maps/api. Still, if you're working with a legacy React codebase, it might be a good fit.

内容的提问来源于stack exchange，提问作者its.david