鸿蒙版Flutter使用 url_launcher 插件打开百度地图或高德地图进行导航

 

在 Flutter 中，可以使用 url_launcher 插件打开百度地图或高德地图进行导航。以下是实现步骤和代码示例：

1. 添加依赖

在 pubspec.yaml 文件中添加 url_launcher 依赖：

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.1.10
 dependency_overrides:
 url_launcher:
    git:
      url: "https://gitcode.com/openharmony-sig/flutter_packages.git"
      path: "package/url_launcher/"

运行以下命令以安装依赖：

flutter pub get

2. 导入插件

在 Dart 文件中导入 url_launcher 插件：

import 'package:url_launcher/url_launcher.dart';

3. 构造地图 URL

根据需要导航的地址构造百度地图或高德地图的 URL。

百度地图

构造百度地图的导航 URL：

String baiduMapUrl(String destination) {
  return 'baidumap://map/direction?destination=$destination';
}
​
String baiduMapWebUrl(String destination) {
  return 'https://map.baidu.com/banner?wd=$destination';
}

高德地图

构造高德地图的导航 URL：

String gaodeMapUrl(String destination) {
  return 'androidamap://navi?sourceApplication=your_app_name&poiid=$destination';
}
​
String gaodeMapWebUrl(String destination) {
  return 'https://uri.amap.com/navigation?sourceApplication=your_app_name&destination=$destination';
}

4. 启动地图应用

使用 launchUrl 方法启动地图应用：

Future<void> launchMap(String url) async {
  if (await canLaunchUrl(Uri.parse(url))) {
    await launchUrl(Uri.parse(url));
  } else {
    throw 'Could not launch $url';
  }
}

5. 示例代码

以下是一个完整的示例代码，展示如何使用 url_launcher 打开百度地图和高德地图进行导航：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
​
void main() {
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({super.key});
​
  // 构造百度地图的导航 URL
  String baiduMapUrl(String destination) {
    return 'baidumap://map/direction?destination=$destination';
  }
​
  // 构造百度地图的网页版导航 URL
  String baiduMapWebUrl(String destination) {
    return 'https://map.baidu.com/banner?wd=$destination';
  }
​
  // 构造高德地图的导航 URL
  String gaodeMapUrl(String destination) {
    return 'androidamap://navi?sourceApplication=your_app_name&poiid=$destination';
  }
​
  // 构造高德地图的网页版导航 URL
  String gaodeMapWebUrl(String destination) {
    return 'https://uri.amap.com/navigation?sourceApplication=your_app_name&destination=$destination';
  }
​
  // 启动地图应用
  Future<void> launchMap(String url) async {
    if (await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url));
    } else {
      throw 'Could not launch $url';
    }
  }
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 地图导航示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  String destination = '北京市海淀区中关村南大街5号';
                  try {
                    await launchMap(baiduMapUrl(destination));
                  } catch (e) {
                    await launchMap(baiduMapWebUrl(destination));
                  }
                },
                child: const Text('打开百度地图导航'),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  String destination = '北京市海淀区中关村南大街5号';
                  try {
                    await launchMap(gaodeMapUrl(destination));
                  } catch (e) {
                    await launchMap(gaodeMapWebUrl(destination));
                  }
                },
                child: const Text('打开高德地图导航'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

6. 注意事项

在鸿蒙上，需要添加网络权限

 

在 iOS 上，需要在 Info.plist 文件中添加以下配置以允许打开外部应用：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>baidumap</string>
  <string>androidamap</string>
</array>

在 Android 上，确保 AndroidManifest.xml 文件中具有正确的权限：

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

通过以上步骤，你可以在 Flutter 应用中实现打开百度地图或高德地图进行导航的功能。