Flutter地图标记淡入淡出效果插件google_map_fade_markers的使用

Flutter 地图标记淡入淡出效果插件 google_map_fade_markers 的使用

简介

google_map_fade_markers 是一个用于在 Flutter 应用中为 Google 地图上的标记添加淡入淡出动画效果的插件。当标记发生变化时，插件会自动为新标记添加淡入动画，为旧标记添加淡出动画。

安装

1. 添加依赖 在 pubspec.yaml 文件中添加插件的最新版本，并运行 dart pub get：

   dependencies:
     google_map_fade_markers: ^0.0.3
   

2. 平台准备

   • Android

     1. 在 android/app/build.gradle 文件中设置 minSdkVersion 为 20 或更高：

        android {
            defaultConfig {
                minSdkVersion 20
            }
        }
        

     2. 在 android/app/src/main/AndroidManifest.xml 文件中指定你的 Google Maps API 密钥：

        <manifest ...>
          <application ...>
            <meta-data android:name="com.google.android.geo.API_KEY"
                       android:value="YOUR KEY HERE"/>
          </application>
        </manifest>
        

   • iOS 在 ios/Runner/AppDelegate.m 文件中指定你的 Google Maps API 密钥：

     #include "AppDelegate.h"
     #include "GeneratedPluginRegistrant.h"
     #import "GoogleMaps/GoogleMaps.h"
     
     @implementation AppDelegate
     
     - (BOOL)application:(UIApplication *)application
         didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
       [GMSServices provideAPIKey:@"YOUR KEY HERE"];
       [GeneratedPluginRegistrant registerWithRegistry:self];
       return [super application:application didFinishLaunchingWithOptions:launchOptions];
     }
     @end
     

     或者在 Swift 代码中，在 ios/Runner/AppDelegate.swift 文件中指定你的 Google Maps API 密钥：

     import UIKit
     import Flutter
     import GoogleMaps
     
     @UIApplicationMain
     @objc class AppDelegate: FlutterAppDelegate {
       override func application(
         _ application: UIApplication,
         didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
       ) -> Bool {
         GMSServices.provideAPIKey("YOUR KEY HERE")
         GeneratedPluginRegistrant.register(with: self)
         return super.application(application, didFinishLaunchingWithOptions: launchOptions)
       }
     }
     

   • Web 需要修改 web/index.html 文件，以包含 Google Maps JS SDK。请参考 google_maps_flutter_web 的 README 文件，获取最新的 Web 平台配置信息。

3. 导入并使用插件 在 Dart 代码中导入 google_map_fade_markers 插件：

   import 'package:google_map_fade_markers/google_map_fade_markers.dart';
   

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 google_map_fade_markers 插件来实现地图标记的淡入淡出效果。

import 'dart:developer';

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

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

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

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  // 初始化标记集合
  final Set<Marker> markers = {
    const Marker(
      markerId: MarkerId("1"),
      position: LatLng(40.463669, -4.749220), // 西班牙马德里
    ),
    const Marker(
      markerId: MarkerId("2"),
      position: LatLng(39.463669, -4.749220), // 西班牙瓦伦西亚
    ),
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Google Map with Fade Markers'),
        ),
        body: GoogleMapFadeMarkers(
          initialCameraPosition: const CameraPosition(
            target: LatLng(40.463669, -3.749220), // 初始相机位置：西班牙马德里
            zoom: 5.0, // 初始缩放级别
          ),
          markers: markers, // 显示的标记集合
          onZoomMove: (zoomType, actualZoom) {
            // 监听缩放事件
            log('Zoom type: $zoomType, Actual zoom: $actualZoom');
          },
          onTap: (argument) {
            // 当用户点击地图时，更新标记
            markers
              ..clear() // 清除现有标记
              ..addAll(changeMarkers()); // 添加新的标记
            setState(() {}); // 通知 Flutter 重新绘制 UI
          },
        ),
      ),
    );
  }

  // 返回一组新的标记
  Set<Marker> changeMarkers() => {
        const Marker(
          markerId: MarkerId("3"),
          position: LatLng(37.463669, -4.749220), // 西班牙塞维利亚
        ),
        const Marker(
          markerId: MarkerId("4"),
          position: LatLng(34.463669, -4.749220), // 西班牙巴塞罗那
        ),
      };
}