Flutter集成Google Maps逐向导航失败问题求助

问题根源 #

你当前使用Google Maps网页链接，系统默认会在WebView中打开；点击"在应用中导航"时触发的googlemaps://协议未被应用正确支持，导致net::ERR_UNKNOWN_URL_SCHEME错误。同时网页链接无法直接唤起原生导航App，需调整URI格式与启动逻辑。

解决方案 #

1. 替换为Google Maps原生URI协议 #

直接使用googlemaps://协议的URI，跳过网页环节，直接唤起Google Maps App：

ElevatedButton(
  onPressed: () async {
    // 修正原代码中destination的经度错误（原用了appState的经度，改为riderLocation的经度）
    String mapsUrl = 'googlemaps://maps.google.com/maps/dir/?api=1&origin=${appState.position.latitude},${appState.position.longitude}&destination=${riderLocation.latitude},${riderLocation.longitude}&travelmode=driving&dir_action=navigate';
    Uri uri = Uri.parse(mapsUrl);

    if (await canLaunchUrl(uri)) {
      await launchUrl(
        uri,
        // 强制启动外部应用，而非WebView
        mode: LaunchMode.externalApplication,
      );
    } else {
      // 未安装Google Maps时，降级到网页版
      String webUrl = 'https://www.google.com/maps/dir/?api=1&origin=${appState.position.latitude},${appState.position.longitude}&destination=${riderLocation.latitude},${riderLocation.longitude}&travelmode=driving&dir_action=navigate';
      await launchUrl(Uri.parse(webUrl), mode: LaunchMode.externalApplication);
    }
  },
  child: const Text("启动导航"),
)

2. 配置平台权限 #

Android端（AndroidManifest.xml）

在<manifest>标签内添加查询权限，允许应用检测Google Maps App：

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="googlemaps" />
  </intent>
</queries>

iOS端（Info.plist）

添加协议白名单，允许应用查询Google Maps协议：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>googlemaps</string>
</array>

3. 确保依赖包正确 #

使用最新版url_launcher包，在pubspec.yaml中配置：

dependencies:
  url_launcher: ^6.2.5

执行flutter pub get更新依赖。

效果说明 #

调整后，点击按钮会直接唤起Google Maps App并启动Turn-by-Turn导航，无需经过WebView，彻底解决协议错误问题，达到原生导航的预期效果。

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