Flutter中点击ListTile基于JSON坐标跳转至谷歌地图位置

步骤1：添加依赖 #

在项目的pubspec.yaml文件中添加url_launcher依赖，用于打开外部地图链接：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.0 # 建议使用最新版本

执行flutter pub get完成依赖安装。

步骤2：修改点击事件逻辑 #

删除原有的onTouch方法，直接在ListTile的onTap回调中处理坐标跳转逻辑：

// 导入url_launcher包
import 'package:url_launcher/url_launcher.dart';

// ... 保留原有其他代码

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Farmers\' Market Finder'),
    ),
    body: Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: ElevatedButton(
            onPressed: readJsonFile,
            child: const Text('Nearby Markets'),
          ),
        ),
        if (_farmersMarkets.isNotEmpty)
          Expanded(
            child: ListView.builder(
              itemCount: _farmersMarkets.length,
              itemBuilder: (BuildContext context, index) {
                // 获取当前列表项的坐标值
                final locationX = _farmersMarkets[index]['location_x'];
                final locationY = _farmersMarkets[index]['location_y'];
                
                return Card(
                  margin: const EdgeInsets.all(15),
                  color: const Color.fromARGB(255, 243, 186, 54),
                  child: ListTile(
                    title: Text(_farmersMarkets[index]['listing_name']),
                    subtitle: Text(_farmersMarkets[index]['location_address']),
                    onTap: () async {
                      // 校验坐标有效性
                      if (locationX != null && locationY != null) {
                        // 构造谷歌地图定位链接，附带地点名称
                        final mapUri = Uri.parse(
                          'geo:$locationY,$locationX?q=$locationY,$locationX(${_farmersMarkets[index]['listing_name']})'
                        );
                        if (await canLaunchUrl(mapUri)) {
                          await launchUrl(mapUri);
                        } else {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(content: Text('无法打开地图应用')),
                          );
                        }
                      } else {
                        ScaffoldMessenger.of(context).showSnackBar(
                          const SnackBar(content: Text('该地点坐标无效')),
                        );
                      }
                    },
                  ),
                );
              },
            ),
          ),
      ],
    ),
  );
}

关键说明 #

• 谷歌地图geo链接格式：geo:纬度,经度?q=纬度,经度(地点名称)，打开后会直接定位到目标坐标并显示地点名称
• 先校验坐标非空，避免空值异常
• 通过canLaunchUrl检查设备是否支持打开地图链接，提升兼容性
• 跳转失败或坐标无效时，用SnackBar给出明确提示

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