Flutter：如何在谷歌地图中获取 map 的中心坐标？

Question

我正在尝试构建一个应用程序。

我正在使用官方的google_maps_flutter 。 我对它没有任何问题，它配置正确并且工作正常。

但我的问题是，当用户移动 map（不打字，移动）时，我需要知道 map 的经纬度。

工作流程我需要一种属性“onMapMoved”，当用户移动 map（问题 1）然后获取用户移动 map 的新纬度和经度时执行一个方法（问题 2）。

我浏览了官方文档，但找不到任何相关内容，只能使用坐标移动相机（我不知道如何从地图中心获得）。

我将不胜感激任何帮助！ 非常感谢！

Answer 1

这是实现它的方法，

---

简而言之，这是相关代码

void _onCameraMove(CameraPosition position) {
_lastMapPosition = position.target;
}

---

_onAddMarkerButtonPressed() {
_markers.clear();
setState(() {
  _markers.add(Marker(
      markerId: MarkerId(_lastMapPosition.toString()),
      position: _lastMapPosition,
      infoWindow: InfoWindow(title: _title, snippet: _detail),
      icon: BitmapDescriptor.defaultMarker));
});
}

这是完整的代码，包含所有通常需要的东西，

        import 'dart:async';
        import 'package:bazar/assets/colors/ThemeColors.dart';
        import 'package:flutter/material.dart';
        import 'package:font_awesome_flutter/font_awesome_flutter.dart';
        import 'package:geocoder/geocoder.dart';
        import 'package:geolocator/geolocator.dart';
        import 'package:google_maps_flutter/google_maps_flutter.dart';
        import 'package:sliding_up_panel/sliding_up_panel.dart';
        
        class LocationScreen extends StatefulWidget {
          @override
          _LocationChooserState createState() => _LocationChooserState();
        }
        
        class _LocationChooserState extends State<LocationScreen> {
          Completer<GoogleMapController> _controller = Completer();
          static const LatLng _center = const LatLng(45.343434, -122.545454);
          final Set<Marker> _markers = {};
          LatLng _lastMapPosition = _center;
          MapType _currentMapType = MapType.normal;
          String _title = "";
          String _detail = "";
        
          TextEditingController _lane1;
          TextEditingController _lane2;
          TextEditingController _lane3;
        
          @override
          void initState() {
            super.initState();
            _lane1 = new TextEditingController();
          }
        
          @override
          Widget build(BuildContext context) {
            double _height = MediaQuery.of(context).size.height;
            double _width = MediaQuery.of(context).size.width;
            return SafeArea(
              child: Scaffold(
                resizeToAvoidBottomPadding: true,
                body: Stack(
                  children: [
                    GoogleMap(
                      mapToolbarEnabled: false,
        //              myLocationEnabled: true,
        //              myLocationButtonEnabled:true,
                      zoomControlsEnabled: false,
                      onMapCreated: _onMapCreated,
                      initialCameraPosition:
                          CameraPosition(target: _center, zoom: 11.0),
                      markers: _markers,
                      mapType: _currentMapType,
                      onCameraMove: _onCameraMove,
                      onTap: _handleTap,
                    ),
                    Padding(
                      padding: EdgeInsets.all(20),
                      child: Align(
                        alignment: Alignment.topRight,
                        child: Column(
                          children: <Widget>[
                            _customButton(
                                FontAwesomeIcons.map, _onMapTypeButtonPressed),
                            SizedBox(
                              height: 15,
                            ),
                            _customButton(
                                FontAwesomeIcons.mapMarker, _onAddMarkerButtonPressed),
                            SizedBox(
                              height: 5,
                            ),
                            _customButton(FontAwesomeIcons.mapPin, _getUserLocation),
                          ],
                        ),
                      ),
                    ),
                    SlidingUpPanel(
                        minHeight: _height * 0.05,
                        maxHeight: _height * 0.4,
                        panel: Container(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: [
                              Container(
                                height: 4,
                                width: _width * 0.2,
                                color: Orange,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Container(
                                color: White,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Container(
                                      height: _height * 0.2,
                                      width: _width,
                                      color: White,
                                      child: TextField(
                                        maxLines: 4,
                                        controller: _lane1,
                                        decoration: InputDecoration(
                                            focusedBorder: OutlineInputBorder(
                                              borderRadius:
                                                  BorderRadius.all(Radius.circular(4)),
                                              borderSide:
                                                  BorderSide(width: 1, color: Orange),
                                            ),
                                            errorBorder: OutlineInputBorder(
                                              borderRadius:
                                                  BorderRadius.all(Radius.circular(4)),
                                              borderSide:
                                                  BorderSide(width: 1, color: Maroon),
                                            ),
                                            errorStyle: TextStyle(
                                                color: Orange.withOpacity(0.5)),
                                            labelStyle: TextStyle(
                                                color: Orange.withOpacity(0.5)),
                                            labelText: "Address "),
                                        cursorColor: Orange,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Container(
                                child: InkWell(
                                  onTap: () {
                                    debugPrint("Save Address");
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    width: _width * 0.3,
                                    height: 40,
                                    padding: EdgeInsets.only(
                                        left: 10, right: 10, top: 6, bottom: 6),
                                    decoration: BoxDecoration(
                                        color: Orange,
                                        borderRadius: BorderRadius.circular(12)),
                                    child: Text(
                                      "Save",
                                      style: TextStyle(
                                          color: White,
                                          fontSize: 20,
                                          fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        body: null)
                  ],
                ),
        //      floatingActionButton: FloatingActionButton.extended(
        //        onPressed: _goToTheLake,
        //        label: Text('To the lake!'),
        //        icon: Icon(Icons.directions_boat),
        //      ),
              ),
            );
          }
        
          void _onMapCreated(GoogleMapController controller) {
            _controller.complete(controller);
          }
        
          void _onCameraMove(CameraPosition position) {
            _lastMapPosition = position.target;
          }
        
          _customButton(IconData icon, Function function) {
            return FloatingActionButton(
              heroTag: icon.codePoint,
              onPressed: function,
              materialTapTargetSize: MaterialTapTargetSize.padded,
              backgroundColor: White,
              child: Icon(
                icon,
                size: 16,
                color: Maroon,
              ),
            );
          }
        
          _onMapTypeButtonPressed() {
            setState(() {
              _currentMapType = _currentMapType == MapType.normal
                  ? MapType.satellite
                  : MapType.normal;
            });
          }
        
          _onAddMarkerButtonPressed() {
            _markers.clear();
            setState(() {
              _markers.add(Marker(
                  markerId: MarkerId(_lastMapPosition.toString()),
                  position: _lastMapPosition,
                  infoWindow: InfoWindow(title: _title, snippet: _detail),
                  icon: BitmapDescriptor.defaultMarker));
            });
          }
        
          _handleTap(LatLng point) {
            _markers.clear();
            _getLocation(point);
            setState(() {
              _markers.add(Marker(
                markerId: MarkerId(point.toString()),
                position: point,
                infoWindow: InfoWindow(title: _title, snippet: _detail),
                icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
              ));
            });
          }
        
          _getLocation(LatLng point) async {
            final coordinates = new Coordinates(point.latitude, point.longitude);
            var addresses =
                await Geocoder.local.findAddressesFromCoordinates(coordinates);
            var first = addresses.first;
            print("${first.featureName} : ${first.addressLine}");
        
            setState(() {
              _title = first.featureName;
              _detail = first.addressLine;
              _lane1.text = _title + "   " + _detail;
            });
          }
        
          _getUserLocation() async {
            Position position = await Geolocator()
                .getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
            final coordinates = new Coordinates(position.latitude, position.longitude);
            var addresses =
                await Geocoder.local.findAddressesFromCoordinates(coordinates);
            var first = addresses.first;
            print("${first.featureName} : ${first.addressLine}");
        
            final GoogleMapController controller = await _controller.future;
            controller.animateCamera(
              CameraUpdate.newCameraPosition(
                CameraPosition(
                    target: LatLng(position.latitude, position.longitude), zoom: 16),
              ),
            );
        
            setState(() {
              _title = first.featureName;
              _detail = first.addressLine;
              _lane1.text = _title + "   " + _detail;
            });
          }
        }

希望它有所帮助，我有一个按钮来添加一个标记，您可以根据需要轻松地在 go 上制作它。

Answer 2

如果您有一个名为 _controller 的 Completer：

Completer<GoogleMapController> _controller = Completer();

Future<LatLng> getCenter() async {
    final GoogleMapController controller = await _controller.future;
    LatLngBounds visibleRegion = await controller.getVisibleRegion();
    LatLng centerLatLng = LatLng(
      (visibleRegion.northeast.latitude + visibleRegion.southwest.latitude) / 2,
      (visibleRegion.northeast.longitude + visibleRegion.southwest.longitude) / 2,
    );

    return centerLatLng;
}

以下是如何调用未来：

LatLng _currentCenter = await getCenter();