【发布时间】:2021-10-07 13:59:58
【问题描述】:
我正在使用 google_maps_flutter 和 flutter_polyline_points 包来加载谷歌地图并在 A 点和 B 点之间绘制折线。 地图已加载并正确绘制了 A 和 B 之间的折线,但 A 和 B 之间的额外直线也在绘制,我不知道我做错了什么。 这是我的代码
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/services.dart';
import 'package:location/location.dart';
import 'package:shipbay/moving/pages/dashboard/dashboard.dart';
import 'package:shipbay/moving/pages/tracking/search.dart';
import 'package:shipbay/shared/components/slide_left_route.dart';
import 'package:shipbay/shared/services/colors.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:shipbay/shared/services/settings.dart';
class Tracking extends StatefulWidget {
final trackingNumber;
const Tracking({Key key, this.trackingNumber}) : super(key: key);
@override
_TrackingState createState() => _TrackingState();
}
class _TrackingState extends State<Tracking> {
//polyline point
double _originLatitude, _originLongitude;
double _destLatitude, _destLongitude;
Map<MarkerId, Marker> markers = {};
Map<PolylineId, Polyline> polylines = {};
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints = PolylinePoints();
//realtime db
final DBRef = FirebaseDatabase.instance.reference();
//search togal for popup
bool _isSearchProcessing = false;
StreamSubscription _locationSubscription;
GoogleMapController _mapController;
@override
void initState() {
super.initState();
}
@override
void dispose() {
if (_locationSubscription != null) {
_locationSubscription.cancel();
}
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _isSearchProcessing
? Center(
child: CircularProgressIndicator(),
)
: Stack(children: [
GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
),
myLocationEnabled: true,
tiltGesturesEnabled: true,
compassEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
zoomControlsEnabled: false,
markers: Set<Marker>.of(markers.values),
polylines: Set<Polyline>.of(polylines.values),
circles: Set.of((circle != null) ? [circle] : []),
onMapCreated: _onMapCreated,
),
Container(
margin: EdgeInsets.only(top: 40),
child: IconButton(
onPressed: () {
_closeMap(context);
},
icon: Icon(Icons.close, color: primary)),
)
]),
floatingActionButton: FloatingActionButton(
backgroundColor: primary,
child: Icon(Icons.location_searching),
onPressed: () {
_searchDialog(context);
}),
);
}
void _onMapCreated(GoogleMapController controller) async {
_mapController = controller;
}
_searchDialog(context) {
showDialog(
context: context,
builder: (_) => AlertDialog(
contentPadding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
content: Builder(
builder: (context) {
return Search(query: widget.trackingNumber);
},
),
),
).then(
(value) {
if (value != null) {
_initMarkers(value['address']);
setState(() {});
}
},
);
}
//initialized marker and polylines
_initMarkers(data) {
_originLatitude = double.parse(data[0]['latitude']);
_originLongitude = double.parse(data[0]['longitude']);
_destLatitude = double.parse(data[1]['latitude']);
_destLongitude = double.parse(data[1]['longitude']);
/// origin marker
_addMarker(LatLng(_originLatitude, _originLongitude), "Pickup",
BitmapDescriptor.defaultMarker);
/// destination marker
_addMarker(LatLng(_destLatitude, _destLongitude), "Destination",
BitmapDescriptor.defaultMarkerWithHue(118));
_getPolyline(data[0]['formatted_address']);
}
//get cordinates
_getPolyline(pickupAddress) async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
mapKey,
PointLatLng(_originLatitude, _originLongitude),
PointLatLng(_destLatitude, _destLongitude),
travelMode: TravelMode.driving,
//wayPoints: [PolylineWayPoint(location: "$pickupAddress")],
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
}
_addPolyLine();
}
//polyling functions
_addPolyLine() {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id, color: Colors.blue, points: polylineCoordinates);
polylines[id] = polyline;
setState(() {});
}
//add pickup and destination markers
_addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
MarkerId markerId = MarkerId(id);
Marker marker = Marker(
markerId: markerId,
icon: descriptor,
position: position,
infoWindow: InfoWindow(
title: "$id",
),
);
markers[markerId] = marker;
}
}
首先我搜索一个订单并将其取货地点和目的地位置设为 (lat&lng)。 我唯一的问题是 A 和 B 之间有额外的直线。
【问题讨论】:
标签: flutter google-maps google-polyline