google-maps - 如何在 Google Maps Flutter 中将动态位置或用户位置设置为圆圈以及显示仅在圆圈内的标记

Question

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:rewahub/widgets/styles.dart';

class Gmap extends StatefulWidget {
  @override
  _GmapState createState() => _GmapState();
}

class _GmapState extends State<Gmap> {
  GoogleMapController mapController;

  LocationData _currentPosition;

  var lng, lat, loading;
  bool sitiosToggle = false;

  var sitios = [];
  Set<Marker> allMarkers = Set();

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

  Set<Circle> circles = Set.from([
    Circle(
        circleId: CircleId("myCircle"),
        radius: 500,
        center: _createCenter,
        fillColor: Color.fromRGBO(171, 39, 133, 0.1),
        strokeColor: Color.fromRGBO(171, 39, 133, 0.5),
        onTap: () {
          print('circle pressed');
        })
  ]);

  populateClients() {
    sitios = [];

    Firestore.instance.collection('retailers').getDocuments().then((docs) {
      if (docs.documents.isNotEmpty) {
        setState(() {
          sitiosToggle = true;
        });
        for (int i = 0; i < docs.documents.length; ++i) {
          initMarker(docs.documents[i].data);
        }
      }
    });
  }

  initMarker(afro) {
    allMarkers.add(Marker(
      markerId: MarkerId(afro['rname']),
      draggable: false,
      infoWindow: InfoWindow(title: afro['rname'], snippet: afro['raddress']),
      position: LatLng(afro['LatLng'].latitude, afro['LatLng'].longitude),
    ));
  }

  Set<Marker> marker = Set.from([
    Marker(
      markerId: MarkerId("mymarker"),
      alpha: 0.7,
      draggable: true,
      infoWindow: InfoWindow(title: "mymarker", snippet: "mymakrer"),
    )
  ]);

  @override
  initState() {
    loading = true;
    _getLocation();
    super.initState();
  }

  _getLocation() async {
    var location = new Location();
    try {
      _currentPosition = await location.getLocation();
      setState(() {
        lat = _currentPosition.latitude;
        lng = _currentPosition.longitude;
        loading = false;
        print(_currentPosition);
      }); //rebuild the widget after getting the current location of the user
    } on Exception {
      _currentPosition = null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: reddish,
        primaryTextTheme: TextTheme(
          title: TextStyle(color: Colors.white),
        ),
      ),
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(100.0),
          child: new AppBar(
            centerTitle: true,
            title: Text(
              'YOUR NEAREST STORES',
              textAlign: TextAlign.center,
            ),
          ),
        ),
        body: Stack(
          children: <Widget>[
            loading == false
                ? GoogleMap(
                    // circles: circles,
                    mapType: MapType.normal,
                    circles: circles,
                    myLocationButtonEnabled: true,
                    myLocationEnabled: true,
                    onMapCreated: _onMapCreated,
                    zoomGesturesEnabled: true,
                    compassEnabled: true,
                    scrollGesturesEnabled: true,
                    rotateGesturesEnabled: true,
                    tiltGesturesEnabled: true,
                    initialCameraPosition: CameraPosition(
                      target: LatLng(lat, lng),
                      zoom: 15.0,
                    ),
                    markers: allMarkers,
                  )
                : Center(
                    child: CircularProgressIndicator(),
                  ),
            Positioned(
                top: MediaQuery.of(context).size.height -
                    (MediaQuery.of(context).size.height - 70.0),
                right: 10.0,
                child: FloatingActionButton(
                  onPressed: () {
                    populateClients();
                  },
                  mini: true,
                  backgroundColor: Colors.red,
                  child: Icon(Icons.refresh),
                )),
          ],
        ),
      ),
    );
  }

  LatLng _createCenter() {
    return _createLatLng(lat , lng);
  }

  LatLng _createLatLng(double lat, double lng) {
    return LatLng(lat, lng);
  }
}

如何让用户在谷歌地图中圈出位置颤动。这意味着，它是否能够在谷歌地图中为圈子提供动态位置。并且还应该过滤圆半径内的标记。

我收到错误消息，如果我尝试为圆提供动态位置，则只能在中心初始化静态变量。请帮我解决这个问题。

提前致谢。

Answer 1

您正在从外部访问方法。所以，它需要是静态的。如果你不想这样，

将您的圈子初始化移入initState. 像，

@override
  initState() {
    circles = Set.from([
      Circle(
          circleId: CircleId("myCircle"),
          radius: 500,
          center: _createCenter,
          fillColor: Color.fromRGBO(171, 39, 133, 0.1),
          strokeColor: Color.fromRGBO(171, 39, 133, 0.5),
          onTap: () {
            print('circle pressed');
          })
    ]);

    loading = true;
    _getLocation();
    super.initState();
  }