flutter 当用户移动时,谷歌Map真实的时间位置更新

z4bn682m  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(144)

我在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),
        ),
    );
  }
}
fjaof16o

fjaof16o1#

我有同样的问题,这个代码为我工作。

Geolocator.getPositionStream().listen((Position _newLocation) {
  setState(() {
     //update your marker and polylines with new location data
  });
});

相关问题