我在Flutter中使用谷歌Map,我正在获取用户的当前位置并在其上显示标记。Map是两个标记,一个是用户的当前位置,另一个是静态的。我在这两个标记之间显示多段线。我希望当用户改变它的位置(用户移动),标记和折线也应该相应地移动(像谷歌Map,当我们从一个位置到另一个)。我如何在下面的代码中实现这一点?
import 'package:flutter/material.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:custom_marker/marker_icon.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'CustomMarker.dart';
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
GoogleMapController? _controller;
final GlobalKey myglobalKey = GlobalKey();
final GlobalKey otherglobalKey = GlobalKey();
Set<Marker> _markers = {};
List<LatLng> polylineCoordinates = [];
late String _mapStyle;
@override
void initState() {
super.initState();
getLocationAndPolyPoints();
rootBundle.loadString('assets/mapStyle.txt').then((string) {
_mapStyle = string;
});
}
Future<void> getLocationAndPolyPoints() async {
Location location = Location();
LocationData currentLocation = await location.getLocation();
setState(() async {
_markers.add(
Marker(
icon: await MarkerIcon.widgetToIcon(myglobalKey),
markerId: MarkerId('MyLocation'),
position: LatLng(currentLocation.latitude ?? 0.0, currentLocation.longitude ?? 0.0),
),
);
_markers.add(
Marker(
icon: await MarkerIcon.widgetToIcon(otherglobalKey),
markerId: MarkerId('Destination'),
position: LatLng(28.4212, 70.2989),
),
);
_controller?.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(currentLocation.latitude ?? 0.0, currentLocation.longitude ?? 0.0),
zoom: 12.0,
),
),
);
getPolyPoints(currentLocation);
});
}
Future<void> getPolyPoints(LocationData currentLocation) async {
PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
"AIzaSyBI22C6hc7_C4yRuyEnUPHPJGu3k0GH6PU",
PointLatLng(currentLocation.latitude ?? 0.0, currentLocation.longitude ?? 0.0),
PointLatLng(28.4212, 70.2989),
);
if (result.points.isNotEmpty) {
setState(() {
result.points.forEach((PointLatLng point) => polylineCoordinates.add(LatLng(point.latitude, point.longitude)));
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Map"),
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
),
body: Stack(
children: [
MyMarker(myglobalKey),
OtherUserMarker(otherglobalKey),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
zoomControlsEnabled: false,
initialCameraPosition: CameraPosition(
target: LatLng(0, 0),
zoom: 12.0,
),
onMapCreated: (GoogleMapController controller) {
_controller = controller;
_controller?.setMapStyle(_mapStyle);
},
markers: _markers,
polylines: {
Polyline(
polylineId: PolylineId("route"),
points: polylineCoordinates,
color: Color(0xFF7B61FF),
width: 6,
),
},
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
getLocationAndPolyPoints();
});
},
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
child: Icon(Icons.location_searching_rounded, color: Colors.white, size: 20),
),
);
}
}
1条答案
按热度按时间fjaof16o1#
我有同样的问题,这个代码为我工作。