问题描述
这里是flutter_polyline_point
的Flutter文档中给出的例子import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'Constants.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Polyline example',theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then,without quitting the app,try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.orange,),home: MapScreen(),);
}
}
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
GoogleMapController mapController;
double _originLatitude = 6.5212402,_originLongitude = 3.3679965;
double _destLatitude = 6.849660,_destLongitude = 3.648190;
Map<MarkerId,Marker> markers = {};
Map<PolylineId,Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
String googleAPiKey = Constants.MAP_API_KEY;
@override
void initState() {
super.initState();
/// origin marker
_addMarker(LatLng(_originLatitude,_originLongitude),"origin",BitmapDescriptor.defaultMarker);
/// destination marker
_addMarker(LatLng(_destLatitude,_destLongitude),"destination",BitmapDescriptor.defaultMarkerWithHue(90));
_getPolyline();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(_originLatitude,zoom: 15),myLocationEnabled: true,tiltGesturesEnabled: true,compassEnabled: true,scrollGesturesEnabled: true,zoomGesturesEnabled: true,onMapCreated: _onMapCreated,markers: Set<Marker>.of(markers.values),polylines: Set<Polyline>.of(polylines.values),)),);
}
void _onMapCreated(GoogleMapController controller) async {
mapController = controller;
}
_addMarker(LatLng position,String id,BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker =
Marker(markerId: markerId,icon: descriptor,position: position);
markers[markerId] = marker;
}
_addPolyLine() {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,color: Colors.red,points: polylineCoordinates);
polylines[id] = polyline;
setState(() {});
}
_getPolyline() async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
Constants.API_KEY,PointLatLng(_originLatitude,PointLatLng(_destLatitude,travelMode: TravelMode.driving,wayPoints: [PolylineWayPoint(location: "Sabo,Yaba Lagos Nigeria")]
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude,point.longitude));
});
}
_addPolyLine();
}
}
API_KEY 和 MAP_API_KEY 之间有什么区别?尝试执行示例时出现错误。
我的要求是获取谷歌地图中两个地方之间的折线点。 请给我一些例子来绘制折线;如果你有。我在绘制路线时遇到问题。尝试了很多例子,但没有得到它。
解决方法
要使用谷歌地图,您需要从以下链接获取 API 密钥:
https://developers.google.com/maps/documentation/javascript/get-api-key
这应该是 MAP_API_KEY
常量。
要使用方向 API,您需要从以下链接获取 API 密钥:
https://developers.google.com/maps/documentation/directions/get-api-key
这应该是 API_KEY
常量。