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

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

特性

flutter_polyline 是一个用于在 Flutter 应用中绘制地图路径的插件。它支持在 Google Maps 或其他支持的地图控件上绘制多条路径。

开始使用

在使用 flutter_polyline 插件之前，请确保您的项目已经配置好 Google Maps 或其他地图服务。

添加依赖

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

dependencies:
  flutter_polyline_points: ^2.0.0

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

初始化 Google Maps

在您的项目中初始化 Google Maps，并确保地图控件已正确加载。

使用

以下是一个完整的示例，展示如何使用 flutter_polyline_points 插件来绘制地图路径。

示例代码

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart'; // 导入 Google Maps 插件
import 'package:flutter_polyline_points/flutter_polyline_points.dart'; // 导入 flutter_polyline_points 插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController; // 地图控制器
  final Set<Marker> _markers = {}; // 地图标记集合
  List<LatLng> polylineCoordinates = []; // 路径坐标列表

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796, -122.08574), // 设置初始地图中心点
    zoom: 14.4746,
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    _fetchPolylineCoordinates(); // 获取路径坐标
  }

  // 获取路径坐标
  Future<void> _fetchPolylineCoordinates() async {
    final String apiKey = "YOUR_GOOGLE_MAPS_API_KEY"; // 替换为您的 Google Maps API Key
    PolylinePoints polylinePoints = PolylinePoints(); // 创建 PolylinePoints 实例
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      apiKey,
      PointLatLng(37.42796, -122.08574), // 起点坐标
      PointLatLng(37.43496, -122.06474), // 终点坐标
    );

    if (result.points.isNotEmpty) {
      setState(() {
        polylineCoordinates = result.points.map((point) {
          return LatLng(point.latitude, point.longitude);
        }).toList();
      });
    }
  }

  // 地图创建完成回调
  void _onMapCreated(GoogleMapController controller) {
    setState(() {
      mapController = controller;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 地图路径绘制'),
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated, // 地图创建完成时调用
        initialCameraPosition: _kGooglePlex, // 初始地图位置
        markers: _markers, // 显示标记
        polylines: {
          Polyline( // 绘制路径
            polylineId: PolylineId("route"),
            points: polylineCoordinates,
            color: Colors.blue,
            width: 5,
          )
        },
      ),
    );
  }
}

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

1 回复

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


flutter_polyline 是一个用于在 Flutter 应用中绘制地图路径的插件。它通常与 Google Maps API 结合使用，以在地图上显示两点之间的路径（Polyline）。以下是如何使用 flutter_polyline 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.1.1
  flutter_polyline: ^2.0.0

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

2. 获取 Google Maps API 密钥

你需要在 Google Cloud Platform 上启用 Google Maps SDK，并获取一个 API 密钥。确保在 AndroidManifest.xml 和 Info.plist 中配置好这个密钥。

3. 创建地图并绘制路径

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

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

class MapScreen extends StatefulWidget {
  [@override](/user/override)
  _MapScreenState createState() => _MapScreenState();
}

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

  // 起点和终点的经纬度
  final LatLng _origin = LatLng(37.7749, -122.4194); // San Francisco
  final LatLng _destination = LatLng(34.0522, -118.2437); // Los Angeles

  // 用于存储 Polyline 的集合
  Set<Polyline> _polylines = {};

  // 用于存储 Polyline 的坐标点
  List<LatLng> _polylineCoordinates = [];

  // 初始化 PolylinePoints
  PolylinePoints polylinePoints = PolylinePoints();

  [@override](/user/override)
  void initState() {
    super.initState();
    _getPolyline();
  }

  // 获取路径坐标点
  _getPolyline() async {
    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      'YOUR_GOOGLE_MAPS_API_KEY', // 替换为你的 Google Maps API 密钥
      PointLatLng(_origin.latitude, _origin.longitude),
      PointLatLng(_destination.latitude, _destination.longitude),
      travelMode: TravelMode.driving,
    );

    if (result.points.isNotEmpty) {
      result.points.forEach((PointLatLng point) {
        _polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    }

    setState(() {
      // 创建 Polyline
      _polylines.add(
        Polyline(
          polylineId: PolylineId('polyline'),
          color: Colors.blue,
          points: _polylineCoordinates,
          width: 5,
        ),
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Polyline Example'),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: _origin,
          zoom: 10,
        ),
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        markers: {
          Marker(
            markerId: MarkerId('origin'),
            position: _origin,
          ),
          Marker(
            markerId: MarkerId('destination'),
            position: _destination,
          ),
        },
        polylines: _polylines,
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MapScreen(),
));
回到顶部