Flutter谷歌距离矩阵计算插件google_distance_matrix的使用

Flutter谷歌距离矩阵计算插件google_distance_matrix的使用

在Flutter应用中，我们常常需要计算两个地点之间的距离。google_distance_matrix 插件可以帮助我们实现这一功能。本文将详细介绍如何使用 google_distance_matrix 插件来计算两个地点之间的距离。

示例代码

首先，我们需要添加 google_distance_matrix 插件到项目的依赖项中。在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  google_distance_matrix: ^0.1.0

然后运行 flutter pub get 来获取依赖项。

接下来，我们来看一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:google_distance_matrix/google_distance_matrix.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GoogleDistanceMatrix googleDistanceMatrix = GoogleDistanceMatrix();

  int distance = 0;

  void _getDistanceMatrix() async {
    // 使用 Google API Key 调用 getDistance 方法
    var distanceMatrix = await googleDistanceMatrix.getDistance(
      'YOUR_GOOGLE_MAP_API_KEY',
      origin: Coordinate(latitude: '-7.7665339', longitude: '110.3333601'),
      destination: Coordinate(latitude: '-7.7602694', longitude: '110.4051345'),
    );

    // 更新 UI
    setState(() {
      distance = distanceMatrix;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('起点: -7.7665339, 110.3333601'),
            const Text('终点: -7.7602694, 110.4051345'),
            Text('$distance 米'), // 显示计算的距离
            ElevatedButton(
              onPressed: _getDistanceMatrix,
              child: const Text('计算距离'),
            )
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入库

   import 'package:flutter/material.dart';
   import 'package:google_distance_matrix/google_distance_matrix.dart';
   

2. 初始化应用

   void main() {
     runApp(const MyApp());
   }
   

3. 定义主应用类

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 定义主页面状态

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     [@override](/user/override)
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 定义页面状态管理类

   class _MyHomePageState extends State<MyHomePage> {
     GoogleDistanceMatrix googleDistanceMatrix = GoogleDistanceMatrix();
     int distance = 0;
   
     void _getDistanceMatrix() async {
       var distanceMatrix = await googleDistanceMatrix.getDistance(
         'YOUR_GOOGLE_MAP_API_KEY',
         origin: Coordinate(latitude: '-7.7665339', longitude: '110.3333601'),
         destination: Coordinate(latitude: '-7.7602694', longitude: '110.4051345'),
       );
   
       setState(() {
         distance = distanceMatrix;
       });
     }
   

6. 构建UI

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             const Text('起点: -7.7665339, 110.3333601'),
             const Text('终点: -7.7602694, 110.4051345'),
             Text('$distance 米'),
             ElevatedButton(
               onPressed: _getDistanceMatrix,
               child: const Text('计算距离'),
             )
           ],
         ),
       ),
     );
   }
   }