Flutter地图路径绘制插件polyline的使用

在Flutter中，polyline 插件可以用来对地图上的路径进行编码和解码，同时还能计算路径的距离。它是一个基于Google的Polyline算法的Dart实现，并且兼容Dart 2。

插件polyline的安装

首先，在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  polyline: ^1.0.2

然后运行以下命令来安装依赖：

flutter pub get

插件polyline使用

polyline 提供了两个主要的功能：路径编码（Encode）和路径解码（Decode）。下面是一个简单的使用示例：

示例代码

import 'package:polyline/polyline.dart';

void main() {
  Polyline polyline;

  /// List<List<double>> coordinates;
  const coordinates = [
    [33.80119, -84.34788], // 起点坐标
    [35.10566, -80.8762],   // 第二个点
    [30.4526, -81.71116],   // 第三个点
    [28.57888, -81.2717]    // 终点坐标
  ];
  const precision = 5;
  const encoded = 'mxhmEfeyaO}w}F_aeTrxk[nabDv}lJsytA'; // 编码后的字符串

  // 编码一组坐标为字符串
  polyline = Polyline.Encode(decodedCoords: coordinates, precision: 5);
  print('Encoded String: ${polyline.encodedString}, Coords: ${polyline.decodedCoords}');

  // 解码字符串为坐标列表
  polyline = Polyline.Decode(encodedString: encoded, precision: precision);
  print('Decoded Coords: ${polyline.decodedCoords}');
  print('String: ${polyline.encodedString}');

  // 计算编码路径的距离，并解码路径
  polyline = Polyline.Distance(encodedString: encoded, unit: 'kilometers');
  print('Distance: ${polyline.distance.floor()}km , Encoded String: ${polyline.encodedString} Decoded Coords: ${polyline.decodedCoords}');
}

代码解释

  1. 导入库：

    import 'package:polyline/polyline.dart';

  2. 定义坐标：

    const coordinates = [
  [33.80119, -84.34788],
  [35.10566, -80.8762],
  [30.4526, -81.71116],
  [28.57888, -81.2717]
];

    这里定义了一组经纬度坐标，表示路径上的点。

  3. 编码路径：

    polyline = Polyline.Encode(decodedCoords: coordinates, precision: 5);
print('Encoded String: ${polyline.encodedString}, Coords: ${polyline.decodedCoords}');

    使用 Polyline.Encode 方法将坐标列表编码为一个字符串。

  4. 解码路径：

    polyline = Polyline.Decode(encodedString: encoded, precision: precision);
print('Decoded Coords: ${polyline.decodedCoords}');
print('String: ${polyline.encodedString}');

    使用 Polyline.Decode 方法将编码字符串解码回坐标列表。

  5. 计算距离：

    polyline = Polyline.Distance(encodedString: encoded, unit: 'kilometers');
print('Distance: ${polyline.distance.floor()}km , Encoded String: ${polyline.encodedString} Decoded Coords: ${polyline.decodedCoords}');

更多关于Flutter地图路径绘制插件polyline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图路径绘制插件polyline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，google_maps_flutter 插件是用于显示 Google 地图的常用插件。要在 Google 地图上绘制路径（Polyline），你可以使用 Polyline 类。以下是如何使用 google_maps_flutter 插件绘制路径的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 google_maps_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1

然后运行 flutter pub get 来安装依赖。

2. 获取 Google Maps API 密钥

你需要在 Google Cloud Platform 上启用 Google Maps API 并获取 API 密钥。将 API 密钥添加到你的 Android 和 iOS 项目中。

  • Android: 在 android/app/src/main/AndroidManifest.xml 中添加以下代码：
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>
  • iOS: 在 ios/Runner/AppDelegate.swift 中添加以下代码：
GMSServices.provideAPIKey("YOUR_API_KEY")

3. 创建 Google 地图并绘制 Polyline

以下是一个简单的示例，展示如何在 Google 地图上绘制一条路径：

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;

  // 定义地图的初始位置
  final LatLng _center = const LatLng(37.7749, -122.4194);

  // 定义 Polyline 的坐标点
  final List<LatLng> _polylineCoordinates = [
    const LatLng(37.7749, -122.4194),
    const LatLng(37.7849, -122.4294),
    const LatLng(37.7949, -122.4394),
  ];

  // 定义 Polyline
  final Set<Polyline> _polylines = {};

  @override
  void initState() {
    super.initState();
    _addPolyline();
  }

  // 添加 Polyline
  void _addPolyline() {
    setState(() {
      _polylines.add(
        Polyline(
          polylineId: const PolylineId("path"),
          points: _polylineCoordinates,
          color: Colors.blue,
          width: 5,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Map with Polyline'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 12.0,
        ),
        polylines: _polylines,
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MapScreen(),
  ));
}

4. 解释代码

  • GoogleMap: 这是显示 Google 地图的 Widget。
  • Polyline: 用于在地图上绘制路径的类。你可以通过 points 属性指定路径的坐标点，通过 color 和 width 属性设置路径的颜色和宽度。
  • _addPolyline(): 这个方法用于将 Polyline 添加到地图上。

5. 运行应用

运行你的 Flutter 应用，你应该会看到地图上显示了一条蓝色的路径。

6. 自定义 Polyline

你可以通过修改 Polyline 的属性来自定义路径的外观，例如改变颜色、宽度、是否虚线等。

Polyline(
  polylineId: const PolylineId("path"),
  points: _polylineCoordinates,
  color: Colors.red,
  width: 10,
  patterns: [PatternItem.dash(10), PatternItem.gap(10)],
),

7. 处理地图交互

你可以通过 GoogleMap 的 onMapCreated 回调来获取地图控制器，并在地图上进行更多的交互操作，例如移动相机、添加标记等。

onMapCreated: (GoogleMapController controller) {
  mapController = controller;
  // 你可以在这里进行更多的地图操作
},

8. 处理 Polyline 的点击事件

你可以通过 onTap 回调来处理 Polyline 的点击事件。

Polyline(
  polylineId: const PolylineId("path"),
  points: _polylineCoordinates,
  color: Colors.blue,
  width: 5,
  onTap: () {
    print("Polyline tapped!");
  },
),
回到顶部