搜索分类、插件与代码仓

google_maps_routes 封面
插件详情v1.1.2

google_maps_routes

一个通过使用 Google 地图方向 API 在 Google 地图上绘制路线的包。

AndroidiOSWeb
近 30 天下载
850
喜欢数
29
Pub 分数
140

安装插件

flutter pub add google_maps_routes

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,可使用 Google Directions API 在 Google 地图上绘制路线。它通过获取和渲染位置之间的导航路径,简化了路线可视化,支持在 Android、iOS 和 Web 平台上实现实时导航路径。该包与 Google Maps for Flutter 无缝集成,使开发者能够显示折线路线、途经点和行程详情。非常适合需要逐向导航或基于位置的路线功能的应用程序。

适合场景

  • 显示驾车路线
  • 可视化步行或骑行路线
  • 集成逐向导航
  • 构建交付或拼车应用
  • 创建旅行行程规划工具

主要特点

  • 使用折线绘制路线
  • 支持多个途经点
  • 与 Google Directions API 集成
  • 跨平台兼容性(Android、iOS、Web)
  • 轻松设置,配置最少

适合对象

  • 导航应用开发者
  • 物流和配送应用
  • 旅行和旅游应用
  • 基于位置的服务平台
  • 需要动态路由渲染的应用

使用建议

  • 需要有效的 Google Maps API 密钥
  • 依赖互联网连接
  • 可能会产生来自 Google Directions API 的使用费用
  • 仅限 Google 地图平台
  • 根据API使用层级应用速率限制

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

google_maps_routes

This is a package for creating routes on google maps using the directions API from Google. Routes are drawn with help of the flutter_polyline_points package.

Screenshot

example-route

Usage

To use the google_maps_routes package, first depend on it.

Then import it where you want to use it

import 'package:google_maps_routes/google_maps_routes.dart';

To use it you need a List of points like this:

/// LatLng is included in google_maps_flutter
List<LatLng> points = [
    LatLng(latitude, longitude),
    LatLng(latitude, longitude),
    LatLng(latitude, longitude),
    LatLng(latitude, longitude),
];

Then you need to instantiate this plugin

MapsRoutes route = new MapsRoutes();

To create a route, just call the following function:

/// routeName is a string and can be anything; it can include spaces but
/// they will be replaced with a dash
/// example: 'Example route' turns into 'Example-route'

/// color is a Color type and will be used as the polyline color:
/// example: Color.fromRGBO(130, 78, 210, 1.0)

/// googleApyKey is a string and is a google directions API key
/// example: get it at
/// https://developers.google.com/maps/documentation/directions/get-api-key
await route.drawRoute(points, routeName, color, googleApiKey);

To use a different travel mode, use the travelMode parameter.

/// Options: driving, bicycling, transit, walking
await route.drawRoute(
    points,
    routeName,
    color,
    googleApiKey,
    travelMode: TravelModes.walking
);

To display the polylines you need to add a polylines parameter to your google map widget.

GoogleMap(polylines: route.routes),

If you ever want to clear the routes, just call:

route.routes.clear();

If you want to calculate the distance of the route use you call the following function with the same List of points you used for drawing the route. You can also use it by itself.

/// Initialize a calculator
DistanceCalculator distanceCalculator = new DistanceCalculator();

/// Call a function that returns a string
/// Pass it the List of points
/// By default it will return with 1 decimal point but you can pass an 
/// option that changes that 
distanceCalculator.calculateRouteDistance(points, decimals: 1);
Credits

所属分类

依赖

依赖清单 2 项

源码仓库

使用此插件的项目

暂无相关数据。