Flutter地图路线绘制插件google_maps_polyline的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter地图路线绘制插件google_maps_polyline的使用

Polyline Points Flutter 是一个用于在地图上处理多段线的Flutter包。这个包允许你解码和编码Google多段线,并使用Google Directions API获取坐标之间的路线。

使用步骤

1. 添加依赖项

首先,将 google_maps_flutter 包添加到您的项目中。编辑 pubspec.yaml 文件如下:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

然后,将 google_maps_polyline 包添加到您的项目中。编辑 pubspec.yaml 文件如下并将其添加到您的项目中:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10
  google_maps_polyline: ^1.0.3

2. 示例代码

以下是一个完整的示例代码,演示如何在Flutter应用中使用 google_maps_polyline 绘制路线:

import 'package:flutter/material.dart';
import 'package:google_maps_polyline/google_maps_polyline.dart';
// ignore: implementation_imports
import 'package:google_maps_polyline/src/point_latlng.dart';
// ignore: implementation_imports
import 'package:google_maps_polyline/src/utils/my_request_enums.dart';
// ignore: implementation_imports
import 'package:google_maps_polyline/src/utils/result_polyline.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  Set<Polyline> polylines = {};

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

  void drawPolyline() async {
    // 创建 PolylinePointsFlutter 类的实例
    GoogleMapsPolyline polylinePoints = GoogleMapsPolyline();

    // 替换为您自己的 Google API 密钥
    String googleApiKey = "YOUR_GOOGLE_API_KEY";

    // 设置起始和目标坐标
    MyPointLatLng origin = MyPointLatLng(37.7749, -122.4194); // San Francisco
    MyPointLatLng destination = MyPointLatLng(34.0522, -118.2437); // Los Angeles

    // 发送请求以获取路线并在结果中获取多段线
    ResultPolyline result = await polylinePoints.getRouteBetweenCoordinates(
      googleApiKey,
      origin,
      destination,
      travelMode: MyTravelMode.driving,
    );

    // 如果成功获取了路线,则创建用于绘制多段线的 LatLng 列表
    if (result.status == "ok" && result.points.isNotEmpty) {
      List<LatLng> polylineCoordinates = [];
      for (var point in result.points) {
        polylineCoordinates.add(LatLng(point.latitude!, point.longitude!));
      }

      // 绘制多段线并将多段线添加到集合中
      polylines.add(Polyline(
        polylineId: const PolylineId("polylineIdString"),
        points: polylineCoordinates,
        color: Colors.blue,
        width: 5,
      ));
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Polyline Points Flutter Demo"),
      ),
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(
          target: LatLng(37.7749, -122.4194), // San Francisco
          zoom: 10,
        ),
        polylines: polylines,
      ),
    );
  }
}

在这个示例中,PolylinePointsFlutter 类用于在地图上绘制多段线。getRouteBetweenCoordinates 函数使用 Google Directions API 获取两个坐标之间的路线。

3. 总结

现在,您可以在Flutter项目中使用 Polyline Points Flutter 包来处理地图上的多段线。通过 PolylinePointsFlutter 类,您可以轻松地绘制路线。

许可证

该项目基于 MIT 许可证发布。有关更多信息,请参阅 LICENSE 文件。


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

1 回复

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


当然,下面是一个关于如何在Flutter中使用google_maps_polyline插件来绘制地图路线的示例代码。这个示例将展示如何设置Google Maps,并在地图上绘制一条从起点到终点的路线。

首先,确保你已经在pubspec.yaml文件中添加了必要的依赖项:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6  # 请使用最新版本
  google_maps_polyline: ^0.2.0  # 请使用最新版本

然后,在你的Flutter项目中,创建一个新的Dart文件(例如maps_screen.dart),并在其中编写以下代码:

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

class MapsScreen extends StatefulWidget {
  @override
  _MapsScreenState createState() => _MapsScreenState();
}

class _MapsScreenState extends State<MapsScreen> {
  GoogleMapController? _controller;
  Set<Marker> _markers = Set.of([]);
  Polyline? _polyline;

  final LatLng startLocation = LatLng(37.7749, -122.4194);
  final LatLng endLocation = LatLng(34.0522, -118.2437);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Polyline Example'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: CameraPosition(
          target: LatLng((startLocation.latitude + endLocation.latitude) / 2,
              (startLocation.longitude + endLocation.longitude) / 2),
          zoom: 10.0,
        ),
        markers: _markers,
        polylines: _polyline != null ? Set.of([_polyline!]) : Set.of([]),
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
          _addMarkersAndPolyline();
        },
      ),
    );
  }

  Future<void> _addMarkersAndPolyline() async {
    // 添加起点和终点标记
    setState(() {
      _markers = Set.from([
        Marker(
          markerId: MarkerId('start'),
          position: startLocation,
        ),
        Marker(
          markerId: MarkerId('end'),
          position: endLocation,
        ),
      ]);
    });

    // 获取API密钥并计算路线(在实际应用中,你应该从后端获取路线数据)
    final String apiKey = 'YOUR_GOOGLE_MAPS_API_KEY';  // 替换为你的API密钥
    final String origin = "${startLocation.latitude},${startLocation.longitude}";
    final String destination = "${endLocation.latitude},${endLocation.longitude}";
    final String url =
        "https://maps.googleapis.com/maps/api/directions/json?origin=$origin&destination=$destination&key=$apiKey";

    final response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      final Map<String, dynamic> responseData = jsonDecode(response.body);
      final List<dynamic> routes = responseData['routes'];

      if (routes.isNotEmpty) {
        final dynamic firstRoute = routes.first;
        final dynamic overviewPolyline = firstRoute['overview_polyline'];
        final String encodedPoints = overviewPolyline['points'];

        final List<LatLng> decodedPoints =
            GoogleMapsPolyline.decodePath(encodedPoints);

        setState(() {
          _polyline = Polyline(
            polylineId: PolylineId('polyline'),
            points: decodedPoints,
            color: Colors.blue,
            width: 4,
            geodesic: true,
          );
        });
      }
    } else {
      // 处理错误
      print('Error fetching route data: ${response.statusCode}');
    }
  }
}

请注意以下几点:

  1. 你需要替换YOUR_GOOGLE_MAPS_API_KEY为你的Google Maps API密钥。
  2. 这个示例中,路线数据是通过Google Maps Directions API获取的。你需要确保你的API密钥具有访问该API的权限,并且没有超出免费配额限制。
  3. 示例中的http.get方法是从dart:io库中获取的,如果你在Flutter Web中使用这个代码,需要改为使用http包的http.Client或其他适用于Web的HTTP客户端库。

最后,在你的主文件中(例如main.dart),添加以下代码来导航到地图屏幕:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Polyline Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapsScreen(),
    );
  }
}

这样,你就完成了一个基本的Flutter应用,它使用google_maps_fluttergoogle_maps_polyline插件在地图上绘制路线。

回到顶部