google-maps - 在抖动中更新 map 的相对位置

标签 google-maps flutter dart maps

您好,下面的代码使用google_maps_flutter和location包显示了具有用户位置的 map ,下面的代码正确显示了具有经度和纬度初始位置的 map ,但是当用户从设备启动应用时,位置不会变成实际是其中一位用户,但仍停留在初始位置,我该如何解决?
Flutter代码:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:MyApp/View/Cantieri/mediterranesn_diet_view.dart'
    show MediterranesnDietView;
import 'package:MyApp/View/Cantieri/title_view.dart' show TitleView;
import 'package:MyApp/View/Home_theme.dart';
import 'package:MyApp/View/MarcaTempo/FunzioneMarcatempoView.dart'
    show MarcaTempoListView;

//Valori longitudine e latitudine
double longitudine = 12.4818, latitudine = 41.9109;
LatLng _center = LatLng(latitudine, longitudine);
//Recupero e salvataggio dei valori del gps di longitudine e latitudine
Future<void> _getGpsValue() async {
  //Instanzio l'oggetto che si occupa di recuperare i dati per la marcatura
  var location = new Location();
  location.onLocationChanged().listen((LocationData currentLocation) async {
    longitudine = currentLocation.longitude;
    latitudine = currentLocation.latitude;
    _center = LatLng(latitudine, longitudine);
  });
  Timer(Duration(seconds: 1), () {
    print("E' passato 1 secondo");
    print("Latitudine: " +
        latitudine.toString() +
        "\n Longitudine: " +
        longitudine.toString());
  });
}

class MyDiaryScreen extends StatefulWidget {
  const MyDiaryScreen({Key key, this.animationController}) : super(key: key);

  final AnimationController animationController;

  @override
  _MyDiaryScreenState createState() => _MyDiaryScreenState();
}

class _MyDiaryScreenState extends State<MyDiaryScreen>
    with TickerProviderStateMixin {
  GoogleMapController mapController;
  var width;

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  List<Widget> listViews = <Widget>[];
  final ScrollController scrollController = ScrollController();
  Animation<double> topBarAnimation;
  double topBarOpacity = 0.0;

  @override
  void initState() {
    _getGpsValue();
    topBarAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
            parent: widget.animationController,
            curve: Interval(0, 0.5, curve: Curves.fastOutSlowIn)));
    addAllListData();

    scrollController.addListener(() {
      if (scrollController.offset >= 24) {
        if (topBarOpacity != 1.0) {
          setState(() {
            topBarOpacity = 1.0;
          });
        }
      } else if (scrollController.offset <= 24 &&
          scrollController.offset >= 0) {
        if (topBarOpacity != scrollController.offset / 24) {
          setState(() {
            topBarOpacity = scrollController.offset / 24;
          });
        }
      } else if (scrollController.offset <= 0) {
        if (topBarOpacity != 0.0) {
          setState(() {
            topBarOpacity = 0.0;
          });
        }
      }
    });
    super.initState();
  }

  void addAllListData() {
    _getGpsValue();
    const int count = 9;

    //Prima view che comprende il titolo della Posizione
    listViews.add(
      TitleView(
        titleTxt: 'Posizione',
        subTxt: '',
        animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: widget.animationController,
            curve:
                Interval((1 / count) * 0, 1.0, curve: Curves.fastOutSlowIn))),
        animationController: widget.animationController,
      ),
    );
    //Inserimento del modulo con le informazioni sulla posizione
    listViews.add(
      MediterranesnDietView(
        animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: widget.animationController,
            curve:
                Interval((1 / count) * 1, 1.0, curve: Curves.fastOutSlowIn))),
        animationController: widget.animationController,
      ),
    );

    //Inserimento del titolo di registrazione
    listViews.add(
      TitleView(
        titleTxt: 'Registrazione',
        subTxt: '',
        animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: widget.animationController,
            curve:
                Interval((1 / count) * 2, 1.0, curve: Curves.fastOutSlowIn))),
        animationController: widget.animationController,
      ),
    );

    //Inserimento dei button per il marcatempo
    listViews.add(
      MarcaTempoListView(
        mainScreenAnimation: Tween<double>(begin: 0.0, end: 1.0).animate(
            CurvedAnimation(
                parent: widget.animationController,
                curve: Interval((1 / count) * 3, 1.0,
                    curve: Curves.fastOutSlowIn))),
        mainScreenAnimationController: widget.animationController,
      ),
    );

    //Inserimento del titolo di registrazione
    listViews.add(
      TitleView(
        titleTxt: 'Mappa',
        subTxt: '',
        animation: Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
            parent: widget.animationController,
            curve:
                Interval((1 / count) * 2, 1.0, curve: Curves.fastOutSlowIn))),
        animationController: widget.animationController,
      ),
    );

    listViews.add(new Container(
        width: width,
        height: 400.0,
        child: GoogleMap(
            onMapCreated: _onMapCreated,
            initialCameraPosition: CameraPosition(
              target: _center,
              zoom: 6.0,
            ))));
  }

  Future<bool> getData(BuildContext context) async {
    await Future<dynamic>.delayed(const Duration(milliseconds: 50));
    width = MediaQuery.of(context).size.width;
    return true;
  }

  Widget getMainListViewUI() {
    return FutureBuilder<bool>(
      future: getData(context),
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        if (!snapshot.hasData) {
          return const SizedBox();
        } else {
          return ListView.builder(
            shrinkWrap: true,
            controller: scrollController,
            padding: EdgeInsets.only(
              top: AppBar().preferredSize.height +
                  MediaQuery.of(context).padding.top +
                  24,
              bottom: 62 + MediaQuery.of(context).padding.bottom,
            ),
            itemCount: listViews.length,
            scrollDirection: Axis.vertical,
            itemBuilder: (BuildContext context, int index) {
              widget.animationController.forward();
              return listViews[index];
            },
          );
        }
      },
    );
  }

//Recupero della barra per la UI
  Widget getAppBarUI() {
    return Column(
      children: <Widget>[
        AnimatedBuilder(
          animation: widget.animationController,
          builder: (BuildContext context, Widget child) {
            return FadeTransition(
              opacity: topBarAnimation,
              child: Transform(
                transform: Matrix4.translationValues(
                    0.0, 30 * (1.0 - topBarAnimation.value), 0.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: TemaApp.white.withOpacity(topBarOpacity),
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(32.0),
                    ),
                    boxShadow: <BoxShadow>[
                      BoxShadow(
                          color: TemaApp.grey.withOpacity(0.4 * topBarOpacity),
                          offset: const Offset(1.1, 1.1),
                          blurRadius: 10.0),
                    ],
                  ),
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: MediaQuery.of(context).padding.top,
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                            left: 16,
                            right: 16,
                            top: 16 - 8.0 * topBarOpacity,
                            bottom: 12 - 8.0 * topBarOpacity),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text(
                                  'Marcatempo',
                                  textAlign: TextAlign.left,
                                  style: TextStyle(
                                    fontFamily: TemaApp.fontName,
                                    fontWeight: FontWeight.w700,
                                    fontSize: 22 + 6 - 6 * topBarOpacity,
                                    letterSpacing: 1.2,
                                    color: TemaApp.darkerText,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          },
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: TemaApp.background,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        resizeToAvoidBottomPadding: true,
        body: Stack(
          children: <Widget>[
            //getMap(),
            getMainListViewUI(),
            getAppBarUI(),
            SizedBox(
              height: MediaQuery.of(context).padding.bottom,
            )
          ],
        ),
      ),
    );
  }
}

最佳答案

您需要在setState()中调用_getGpsValue()来更新用户的位置。

setState(() {
longitudine = currentLocation.longitude;
    latitudine = currentLocation.latitude;
    _center = LatLng(latitudine, longitudine);
})
按照documentation:

Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.

关于google-maps - 在抖动中更新 map 的相对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63465703/

相关文章:

python - 使用谷歌python的街道城市反向地理编码

android - GoogleService 初始化失败,状态 : 10

dart - 带行的 ListView - 警告和错误

flutter - 如何在 flutter 中为容器设置边框动画

Flutter 移动应用程序中的 Python 和 Dart 集成

swift - ios swift 中谷歌地图上的侧面自定义形状的四个方形 field

javascript - 谷歌地图 CSS 问题

python - 连接 Flask Socket.IO Server 和 Flutter

dart - 带有 ML Kit 的计算机视觉 - Flutter In Focus

firebase - MissingPluginException(在 channel plugins.flutter.io/firebase_auth 上找不到方法 signInAnonymously 的实现)