widget_marker_google_map

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个扩展 Google 地图的 Flutter 包，允许开发者在地图上放置基于自定义 widget 的标记。与标准标记不同，该包支持使用任何 Flutter widget（如图标、头像或交互式元素）作为地图标记。它可无缝集成到 Google 地图插件中，并支持 Android、iOS 和 Web 平台。适用于需要丰富、动态或交互式标记内容的应用程序，超越简单的图像或文本。

适合场景

交互式地图界面
带动画的自定义标记 UI
实时位置跟踪，视觉效果丰富
地图上的用户资料标记
地图上的动态数据可视化

主要特点

支持任意 Flutter 小部件作为标记
跨平台兼容性（Android、iOS、Web）
与 Google 地图插件轻松集成
可自定义的标记定位和行为
动态标记内容的实时更新

适合对象

开发交互式地图的开发者
需要品牌化或动画标记的应用程序
具有实时位置数据的项目
UI密集型的地理位置应用
使用 Flutter 实现全栈地图功能的团队

使用建议

使用大量复杂小部件时的性能影响
需要正确的状态管理以实现动态更新
对高级标记聚类的有限支持
可能需要针对大规模地图渲染进行优化
取决于 Google Maps SDK 的可用性

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Google map with widget markers.

Set up

Follow the steps on google_maps_flutter document.

Usage

Same as google_maps_flutter except for widgetMarkers.

 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

You need to insert the list of WidgetMarker to use widget markers.

Make sure that you still need to use onTap method when you use gestures.

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

If you have any requests or questions, feel free to ask on github.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_Devin
💻

_{Santa Takahashi}
💻

This project follows the all-contributors specification. Contributions of any kind welcome!

搜索插件、代码仓与 APP 分类