Flutter地图标记插件 widget_marker_google_map 的使用

简介

widget_marker_google_map 是一个在Flutter中使用的Google地图插件，允许你在地图上添加自定义的Widget作为标记。它基于 google_maps_flutter 插件，并扩展了其功能。

项目链接

• Pub.dev
• License: MIT

设置

首先，请按照 google_maps_flutter 文档 中的步骤进行设置和配置。

使用方法

该插件的使用方式与 google_maps_flutter 类似，只是增加了一个 widgetMarkers 参数用于定义地图上的自定义Widget标记。

示例代码

以下是一个完整的示例，展示如何使用 widget_marker_google_map：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  static const shibuya = CameraPosition(
    bearing: 192.8334901395799,
    target: LatLng(35.6598003, 139.7023894),
    zoom: 15.151926040649414,
  );

  static const cafePosition = LatLng(35.659172, 139.7023894);
  static const clothesShopPosition = LatLng(35.659528, 139.698723);
  static const hamburgerShopPosition = LatLng(35.6614027, 139.6983333);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WidgetMarkerGoogleMap(
        initialCameraPosition: shibuya,
        mapType: MapType.normal,
        widgetMarkers: [
          WidgetMarker(
            position: cafePosition,
            markerId: 'cafe',
            widget: Container(
              color: Colors.brown,
              padding: const EdgeInsets.all(2),
              child: const Icon(
                Icons.coffee,
                color: Colors.white,
                size: 64,
              ),
            ),
          ),
          WidgetMarker(
            position: clothesShopPosition,
            markerId: 'clothes',
            widget: Container(
              color: Colors.green,
              padding: const EdgeInsets.all(4),
              child: const Text(
                'shop',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 32,
                ),
              ),
            ),
          ),
          WidgetMarker(
            position: hamburgerShopPosition,
            markerId: 'hamburger',
            widget: Container(
              color: Colors.red,
              padding: const EdgeInsets.all(2),
              child: const Icon(
                Icons.fastfood,
                color: Colors.yellow,
                size: 64,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

WidgetMarker 类

要使用自定义的Widget标记，需要创建 WidgetMarker 对象并将其添加到 widgetMarkers 列表中。

class WidgetMarker {
  WidgetMarker({
    required this.position,
    required this.markerId,
    required this.widget,
    this.onTap,
  }) : assert(markerId.isNotEmpty);

  final LatLng position;

  /// Keep this unique, otherwise it will not appear.
  final String markerId;

  /// Gestures of widget is disabled.
  /// Use this callback instead.
  final VoidCallback? onTap;

  final Widget widget;
}

确保每个 markerId 都是唯一的，否则标记可能不会显示。此外，如果需要处理手势事件，可以使用 onTap 回调函数。

如果有任何问题或请求，请随时在 GitHub 上提出。