簡體   English   中英

Flutter折線問題

[英]Flutter polyline issue

我目前正在為谷歌 map 工作。 我遵循 GCP 的所有步驟,並為谷歌 map 啟用方向 API。現在我想在源和目標之間的 map 處顯示折線。 但是當我在真實設備上運行應用程序時,它無法顯示。 我只得到源和目的地的標記。 請在下面查看我的代碼。

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);
}
} 

如何用折線顯示我的 map?

看來問題出在您的 API 密鑰上。 我使用自己的 API 鍵運行您的代碼,並且能夠顯示折線(見下面的屏幕截圖)。

請確保您的項目已關聯到有效的結算帳戶,以便使用 Google Maps Platform API。 請參閱此鏈接https://developers.google.com/maps/documentation/directions/quickstart#before_you_begin的“設置您的項目”部分的第 2 步

在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM