React Native Maps使用MapViewDirections调用谷歌地图API密钥未授权报错求助

Hey there! Let's troubleshoot that frustrating authorization error you're getting when trying to display routes with MapViewDirections. That error message tells us your Google Maps API key isn't properly set up to allow your React Native app to access the Directions API—here's how to fix it step by step:

1. Double-check the Component Prop Name #

First, a quick easy win: the react-native-maps-directions component expects the API key to be passed via the apiKey prop (camelCase), but your code uses apikey (all lowercase). That's a common typo! Update your code to:

<MapViewDirections 
  origin={origin} 
  destination={destination} 
  apiKey={GOOGLE_MAPS_APIKEY} 
  strokeWidth={3} 
  strokeColor="hotpink" 
/>

2. Ensure Google Maps Directions API is Enabled #

The MapViewDirections component relies on the Google Maps Directions API to fetch route data. If this API isn't enabled in your Google Cloud project, you'll get authorization errors every time:

• Head to the Google Cloud Console
• Find the project linked to your API key
• Go to the "APIs & Services" > "Library" section
• Search for "Directions API" and click "Enable"

3. Fix API Key Restrictions #

Google API keys have restrictions to prevent misuse, but if these are set incorrectly, they'll block your app:

For Android Apps: #

• In the Google Cloud Console, go to "APIs & Services" > "Credentials"
• Select your API key, then under "Key restriction", choose "Android apps"
• Click "Add an item" and enter your app's package name (e.g., com.yourcompany.yourapp) and SHA-1 fingerprint (you can get this from Android Studio or via the keytool command in your terminal)

For iOS Apps: #

• Under "Key restriction", choose "iOS apps"
• Enter your app's Bundle ID (found in your Xcode project settings)

For Testing Purposes: #

If you're still stuck, temporarily set the restriction to "None" (only do this for testing—never leave it this way for production!) to rule out restriction issues. If the route shows up after this, you know your restriction settings were the problem.

4. Verify Direct API Access #

To confirm it's not a component-specific issue, test the Directions API directly:

• Open a browser and paste this URL (replace placeholders with your details):

  https://maps.googleapis.com/maps/api/directions/json?origin=40.712776,-74.005974&destination=34.052235,-118.243683&key=YOUR_API_KEY
  

• If you get an authorization error here too, the problem is definitely with your API key setup. If you get a valid JSON response with route data, then the issue is in your React Native code (go back to checking the prop name or component setup).

5. Check App Permissions #

Make sure your app has internet access:

• Android: Add this line to your AndroidManifest.xml:

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS: Your app should already allow HTTPS requests by default, but if you have strict App Transport Security settings, ensure they don't block Google's API endpoints.

Once you've worked through these steps, your MapViewDirections should start displaying the route as expected!

内容的提问来源于stack exchange，提问作者saas