如何在 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);
  }
}

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

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

提前致谢。

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();
  }

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

How to set Dynamic Location or User's Location to Circle in Google Maps Flutter And also to show markers which is only inside the circle

google-maps

flutter

location

marker

google-maps-flutter