Flutter地图标记缓存插件cached_map_marker的使用

提供了用于简化在Flutter应用程序中缓存Google Maps自定义标记的库。它利用flutter_cache_manager包来缓存图像和小部件，从而实现高效的检索和使用地图上的自定义标记。该软件包通过以下功能解决了管理标记资源时常见的挑战：

1. 缓存网络图像：从网络下载并缓存图像，并根据需要调整大小以用作地图标记。
2. 将小部件渲染为图像并缓存：将Flutter小部件渲染为图像，缓存这些图像，并将其用作自定义标记。这对于需要在地图上显示的动态内容特别有用。
3. 高效资源管理：提供清除缓存的方法，确保应用程序有效地管理资源并避免不必要的存储使用。

特性

• 下载和缓存：自动下载并缓存图像以用作地图标记，减少网络请求并提高性能。
• 自定义标记大小：允许指定标记图像的大小，以便根据应用程序的需求进行定制。
• 缓存管理：提供清除缓存的方法，帮助管理设备的存储，并确保使用最新的图像。
• 与Google Maps Flutter轻松集成：通过BitmapDescriptor对象与Google Maps Flutter集成。

入门指南

要在Flutter项目中使用Cached Map Marker包，请遵循以下步骤：

安装

1. 在您的pubspec.yaml文件中添加以下内容：

dependencies:
  cached_map_marker: <lastest>

1. 导入包

import 'package:cached_map_marker/cached_map_marker.dart';

创建一个来自小部件和网络图像的自定义标记，并将其缓存

final _cachedMapMarker = CachedMapMarker();
final markers = await Future.wait([
      // 创建一个来自网络图像的自定义标记并缓存它
      _cachedMapMarker.fromNetwork(
          url: 'https://cdn-icons-png.flaticon.com/512/5193/5193688.png',
          size: const Size(60, 60)),
      // 创建一个来自小部件的自定义标记并缓存它
  _cachedMapMarker.fromWidget(
        widget: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(50),
          ),
          child: const Icon(
            Icons.location_on,
            color: Colors.red,
            size: 50,
        ),
      ),
    cacheKey: 'widget_marker',
    logicalSize: const Size(250, 250),
    imageSize: const Size(100, 100),
    )
]);

贡献

欢迎贡献！请随时提交拉取请求。

许可证

此包在MIT许可证下授权。详情请参阅LICENSE文件。

### 示例代码

```dart
import 'package:cached_map_marker/cached_map_marker.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 此小部件是您的应用的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cached Map Marker Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => const GoogleMapView(),
              ),
            );
          },
          child: const Text('Go to Google Map View'),
        ),
      ),
    );
  }
}

class GoogleMapView extends StatefulWidget {
  const GoogleMapView({super.key});

  [@override](/user/override)
  State<GoogleMapView> createState() => _GoogleMapViewState();
}

class _GoogleMapViewState extends State<GoogleMapView> {
  Set<Marker> markers = {};
  late CachedMapMarker _cachedMapMarker;

  [@override](/user/override)
  void initState() {
    _cachedMapMarker = CachedMapMarker();
    _initMarkers();
    super.initState();
  }

  void _initMarkers() async {
    late Marker networkMarker;
    late Marker bytesMarker;
    final futures = await Future.wait([
      _cachedMapMarker.fromNetwork(
          url: 'https://cdn-icons-png.flaticon.com/512/5193/5193688.png',
          size: const Size(60, 60)),
      _cachedMapMarker.fromWidget(
        widget: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(50),
          ),
          child: const Icon(
            Icons.location_on,
            color: Colors.red,
            size: 50,
          ),
        ),
        cacheKey: 'widget_marker',
        logicalSize: const Size(250, 250),
        imageSize: const Size(100, 100),
      )
    ]);
    networkMarker = Marker(
        markerId: const MarkerId('network_marker_id'),
        position: const LatLng(37.77483, -122.41942),
        icon: futures[0]);

    bytesMarker = Marker(
        markerId: const MarkerId('bytes_marker_id'),
        position: const LatLng(37.734921595128405, -122.43419039994477),
        icon: futures[1]);
    setState(() {
      markers.addAll([networkMarker, bytesMarker]);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Cached Map Marker Demo'),
      ),
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(
          target: LatLng(37.77483, -122.41942),
          zoom: 12,
        ),
        markers: markers,
      ),
    );
  }
}