Flutter地图路线绘制插件google_maps_polyline的使用
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
更多关于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}');
}
}
}
请注意以下几点:
- 你需要替换
YOUR_GOOGLE_MAPS_API_KEY
为你的Google Maps API密钥。 - 这个示例中,路线数据是通过Google Maps Directions API获取的。你需要确保你的API密钥具有访问该API的权限,并且没有超出免费配额限制。
- 示例中的
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_flutter
和google_maps_polyline
插件在地图上绘制路线。