颤振折线问题

Posted 2023-02-23

【中文标题】颤振折线问题

【英文标题】：Flutter polyline issue

【发布时间】：2021-07-28 11:11:27

【问题描述】：

我目前正在为谷歌地图工作。我遵循 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, _originLongitude),
  "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, _originLongitude),
  PointLatLng(_destLatitude, _destLongitude),
  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 密钥放入您的任何代码中。公开暴露不安全的密钥可能会导致意外使用，从而导致您的帐户产生意外费用。

请不要（只是）发布错误、代码和依赖项的图片。

非常感谢@NelsonJr 提供有价值的信息。

感谢您的信息。我会删除它@geocodezip

【参考方案1】：

看来问题出在您的 API 密钥上。我使用自己的 API 密钥运行您的代码，并且能够显示折线（请参见下面的屏幕截图）。

请确保您的项目已关联到有效的结算帐户，以便使用 Google Maps Platform API。请参阅此链接https://developers.google.com/maps/documentation/directions/quickstart#before_you_begin

的“设置您的项目”部分的第 2 步

【讨论】：

非常感谢您的宝贵回答。这对我有很大帮助......！ :)