Ionic 3 Geolocation始终返回"{}"，无法获取坐标求解决

Hey there, let's work through this geolocation issue together—it’s definitely frustrating when you’re expecting coordinates but only get an empty object back. Let’s break down the most common causes and fixes step by step.

1. Define Proper Geolocation Options #

Looking at your code, you’re passing options to getCurrentPosition() but haven’t shown where it’s defined. If options is undefined or empty, this can sometimes lead to unexpected behavior (though it shouldn’t return an empty object outright). Let’s define valid options to ensure the plugin behaves as expected:

const options: GeolocationOptions = {
  enableHighAccuracy: true, // Use GPS for precise location
  timeout: 10000, // Wait 10 seconds before timing out
  maximumAge: 0 // Don't use cached location
};

Add this inside your platform.ready() callback before calling getCurrentPosition(), or define it as a class property.

2. Verify Platform Permissions #

Permissions are the #1 culprit for geolocation failures in Ionic. Make sure you’ve configured the required permissions for both iOS and Android:

Android #

Add these permissions to your AndroidManifest.xml (located in platforms/android/app/src/main/):

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- For Android 10+, add this if you need background location -->
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

iOS #

Add these entries to your Info.plist (located in platforms/ios/YourAppName/):

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to provide personalized services</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need your location to provide personalized services even when the app is in the background</string>

The string should explain why your app needs location access—iOS requires this to show the permission prompt.

3. Check Plugin Compatibility & Installation #

Ensure you have the correct plugins installed and they’re compatible with your Ionic version:

• If you’re using Cordova:

  # Uninstall and reinstall the plugin to fix potential corruption
  ionic cordova plugin remove cordova-plugin-geolocation
  ionic cordova plugin add cordova-plugin-geolocation
  npm install @ionic-native/geolocation
  

• If you’re using Capacitor (Ionic 6+), consider switching to Capacitor’s official geolocation plugin instead of the Ionic Native wrapper:

  npm install @capacitor/geolocation
  npx cap sync
  

  Then update your code to use Capacitor’s API:

  import { Geolocation } from '@capacitor/geolocation';
  
  // Inside platform.ready() or async function
  const position = await Geolocation.getCurrentPosition({
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 0
  });
  console.log('Position:', position);
  

4. Debug the Error Properly #

Your catch block uses JSON.stringify(error), but some error properties (like stack traces or non-serializable data) might get lost. Try logging the error directly to see more details:

.catch((error) => {
  console.error('Error getting location:', error); // Log the full error object
  console.error('Error code:', error.code);
  console.error('Error message:', error.message);
});

Common error codes to watch for:

• 1: Permission denied
• 2: Position unavailable
• 3: Timeout

5. Test on a Real Device #

Geolocation often behaves differently on emulators/simulators compared to real devices. Emulators might not have GPS enabled, or might require you to set a mock location. Test your app on a physical device with location services turned on to rule out emulator-specific issues.

Updated Example Code #

Here’s your code with proper options and improved error logging:

import { Geolocation, GeolocationOptions } from '@ionic-native/geolocation';
import { Platform } from '@ionic/angular';

constructor(
  private geolocation: Geolocation,
  public platform: Platform
) {}

// Call this function when you need to get location
getUserLocation() {
  this.platform.ready().then(() => {
    const options: GeolocationOptions = {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 0
    };

    this.geolocation.getCurrentPosition(options)
      .then((position) => {
        console.log('Geolocation successful', position);
        this.app.alertMsg(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
      }).catch((error) => {
        console.error('Error getting location:', error);
        console.error('Error code:', error.code);
        console.error('Error message:', error.message);
      });
  });
}

Give these steps a try—chances are one of them will fix the empty object issue. Let me know if you run into any specific errors after testing!

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