Flutter地图控制插件google_maps_controller的使用

Flutter地图控制插件google_maps_controller的使用

google_maps_controller 是一个用于 Google Maps 的状态管理控制器插件，它允许你管理标记（Markers）、圆圈（Circles）、多段线（Polylines）和多边形（Polygons）。此插件受到 map_controller 插件的启发，适用于 flutter_map。

开始使用

请按照 google_maps_flutter 的配置步骤进行设置。

使用方法

使用 GoogleMaps 小部件代替 GoogleMap 以使用自动设置的小部件。使用 GoogleMapsController 来执行所有操作。你可以通过提供者（provider）、继承小部件（InheritedWidget）、BLoC 或其他状态管理工具来提供控制器。

下面是一个完整的示例 DEMO：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_controller/google_maps_controller.dart';

void main() {
  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Controller Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  final s = "Map 2";
  late final GoogleMapsController controller;
  late final StreamSubscription<CameraPosition> subscription;
  CameraPosition? position;

  @override
  void initState() {
    super.initState();

    // 初始化地图控制器
    controller = GoogleMapsController(
      initialCameraPosition: CameraPosition(
        target: LatLng(37.42796133580664, -122.085749655962), // 初始位置
        zoom: 14.4746, // 初始缩放级别
      ),
      onTap: (latlng) {
        // 点击地图时添加一个圆圈
        Circle circle = Circle(
          circleId: CircleId("ID:" + DateTime.now().millisecondsSinceEpoch.toString()),
          center: latlng,
          fillColor: Color.fromRGBO(255, 0, 0, 1),
          strokeColor: Color.fromRGBO(155, 0, 0, 1),
          radius: 5,
          onTap: () => controller.removeCircle(circle), // 点击圆圈时移除它
          consumeTapEvents: true,
        );

        controller.addCircle(circle);
      },
    );

    // 监听相机移动事件并更新位置
    subscription = controller.onCameraMove$.listen((e) {
      setState(() {
        position = e;
      });
    });
  }

  @override
  void dispose() {
    subscription.cancel(); // 取消订阅
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: GoogleMaps(
            controller: controller, // 绑定控制器
          ),
        ),
        SafeArea(
          top: false,
          child: Text(position?.toString() ?? '移动地图'), // 显示当前相机位置
        )
      ],
    );
  }
}

在上面的代码中：

• 我们创建了一个 GoogleMapsController 实例，并设置了初始相机位置。
• 在点击地图时添加一个圆圈，并且点击圆圈时会移除它。
• 监听相机移动事件，并将当前相机位置显示在屏幕上。

示例演示图

许可证

MIT 许可证。

API

完整文档可以查看 这里。

GoogleMapsController

GoogleMapsController({
    void Function(GoogleMapController) onMapCreated,
    void Function() onCameraIdle,
    void Function(CameraPosition) onCameraMove,
    void Function() onCameraMoveStarted,
    void Function(LatLng) onLongPress,
    void Function(LatLng) onTap,
    CameraPosition initialCameraPosition,
    Set<Circle> initialCircles,
    Set<Marker> initialMarkers,
    Set<Polygon> initialPolygons,
    Set<Polyline> initialPolylines,
    bool buildingsEnabled,
    CameraTargetBounds cameraTargetBounds,
    bool compassEnabled,
    bool indoorViewEnabled,
    bool liteModeEnabled,
    bool zoomControlsEnabled,
    bool mapToolbarEnabled,
    MapType mapType,
    MinMaxZoomPreference minMaxZoomPreference,
    bool myLocationEnabled,
    bool myLocationButtonEnabled,
    EdgeInsets padding,
    bool rotateGesturesEnabled,
    bool scrollGesturesEnabled,
    bool tiltGesturesEnabled,
    bool trafficEnabled,
    bool zoomGesturesEnabled,
    List<Factory<OneSequenceGestureRecognizer>> gestureRecognizers,
});

GoogleMaps

GoogleMaps({
    @required GoogleMapsController controller,
})