问题描述
我目前在为谷歌地图工作。我遵循 GCP 的所有步骤,并为谷歌地图启用了方向 API。现在我想在源和目的地之间的地图上显示折线。但是当我在真实设备上运行应用程序时,它无法显示。我只得到源和目的地的标记。 请在下面查看我的代码。
import 'package:Flutter/material.dart';
import 'package:Flutter_polyline_points/Flutter_polyline_points.dart';
import 'dart:async';
import 'package:google_maps_Flutter/google_maps_Flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
double _originLatitude = 6.5212402;
double _originLongitude = 3.3679965;
double _destLatitude = 6.849660;
double _destLongitude = 3.648190;
Map<MarkerId,Marker> markers = {};
polylinePoints polylinePoints = polylinePoints();
Map<polylineId,polyline> polylines = {};
class _MyAppState extends State<MyApp> {
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(_originLatitude,_originLongitude),zoom: 9.4746,);
@override
void initState() {
_addMarker(
LatLng(_originLatitude,"origin",BitmapDescriptor.defaultMarker,);
_addMarker(
LatLng(_destLatitude,_destLongitude),"destination",BitmapDescriptor.defaultMarkerWithHue(90),);
_getpolyline();
print("Enter at getpoly");
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,title: 'Welcome to Flutter',home: Scaffold(
body: GoogleMap(
mapType: MapType.normal,initialCameraPosition: _kGooglePlex,myLocationEnabled: true,tiltGesturesEnabled: true,compassEnabled: true,scrollGesturesEnabled: true,zoomGesturesEnabled: true,polylines: Set<polyline>.of(polylines.values),markers: Set<Marker>.of(markers.values),onMapCreated: (GoogleMapController controller) {
_controller.complete(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(List<LatLng> polylineCoordinates) {
polylineId id = polylineId("poly");
polyline polyline = polyline(
polylineId: id,points: polylineCoordinates,width: 8,);
polylines[id] = polyline;
setState(() {});
}
void _getpolyline() async {
List<LatLng> polylineCoordinates = [];
polylineResult result = await polylinePoints.getRouteBetweenCoordinates(
"API_KEY",// My Google Api key
PointLatLng(_originLatitude,PointLatLng(_destLatitude,travelMode: TravelMode.driving,);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude,point.longitude));
});
} else {
print(result.errorMessage);
}
_addpolyLine(polylineCoordinates);
}
}
如何用折线显示我的地图?
解决方法
问题似乎出在您的 API 密钥上。我使用自己的 API 密钥运行了您的代码,并且能够显示多段线(请参见下面的屏幕截图)。
请确保您的项目与有效的结算帐户相关联,以便使用 Google Maps Platform API。请参阅此链接 https://developers.google.com/maps/documentation/directions/quickstart#before_you_begin
的“设置您的项目”部分的第 2 步