Flutter如何唤起地图应用选择弹窗 点击按钮跳转指定经纬度导航

核心原理 #

你之前直接使用谷歌地图的HTTP链接，系统会将其识别为网页资源，因此仅弹出浏览器选择列表。要触发地图应用的选择弹窗，需使用跨平台通用的geo: URI协议，系统会自动匹配所有注册了该协议的地图类应用（包括谷歌地图、Waze、高德地图、百度地图等），弹出对应选择列表供用户选择。

前置配置 #

1. 依赖安装 #

确保已在pubspec.yaml中添加url_launcher依赖：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.0 # 可替换为最新版本

2. 平台权限配置 #

• 安卓端（Android 11及以上）：在android/app/src/main/AndroidManifest.xml的<manifest>根节点下添加查询配置：

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

• iOS端：在ios/Runner/Info.plist的<dict>节点下添加白名单配置：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>geo</string>
</array>

核心代码实现 #

import 'package:url_launcher/url_launcher.dart';

// 封装打开地图的方法
Future<void> openMap(double latitude, double longitude) async {
  // 构造通用地理资源URI，q参数为搜索的坐标，可在括号内添加地址备注
  final Uri mapUri = Uri.parse('geo:$latitude,$longitude?q=$latitude,$longitude');
  if (await canLaunchUrl(mapUri)) {
    await launchUrl(mapUri);
  } else {
    // 兜底逻辑：设备无地图应用时， fallback到网页版谷歌地图
    final Uri webMapUri = Uri.parse('https://www.google.com/maps/search/?api=1&query=$latitude,$longitude');
    if (await canLaunchUrl(webMapUri)) {
      await launchUrl(webMapUri);
    } else {
      // 可替换为自定义Toast提示
      throw '无法打开地图资源';
    }
  }
}

按钮调用示例 #

ElevatedButton(
  onPressed: () => openMap(model.beginningLat, model.beginningLng),
  child: const Text('启动导航'),
)

效果说明 #

调用该方法后，系统会自动弹出所有已安装的地图应用选择框，用户选择后会自动跳转到对应地图的坐标搜索页，用户可自行发起导航。

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