Flutter自定义标记插件custom_marker的使用

概述

custom_marker 是一个Flutter插件，用于将Widget、本地图片、网络图片或SVG文件转换为 BitmapDescriptor，以便在 google_maps_flutter 中作为图标标记使用。

入门指南

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  custom_marker: ^1.0.0

使用示例

从网络图片创建圆形带边框的标记图标

onPressed: () async {
  markers.add(
    Marker(
      icon: await MarkerIcon.downloadResizePictureCircle(
        'https://thegpscoordinates.net/photos/la/tehran_iran_5u679ezi8f.jpg',
        size: 150,
        addBorder: true,
        borderColor: Colors.white,
        borderSize: 15,
      ),
      position: LatLng(35.6892, 51.3890),
    ),
  );
}

注意事项

1. 异步函数：你必须在一个异步函数中添加你的标记。
2. 其他函数：除了将Widget转换为标记外，所有其他函数的使用方式都相同。

将Widget转换为标记

MyMap 类包含Google地图组件

import 'package:custom_marker/marker_icon.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

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

class _MyMapState extends State<MyMap> {
  Set<Marker> _markers = <Marker>{};
  final GlobalKey globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Stack(
            children: [
              MyMarker(globalKey),
              Positioned.fill(
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                      target: LatLng(32.4279, 53.6880), zoom: 15),
                  markers: _markers,
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton.extended(
            label: FittedBox(child: Text('Add Markers')),
            onPressed: () async {
              _markers.add(
                Marker(
                  markerId: MarkerId('circleCanvasWithText'),
                  icon: await MarkerIcon.widgetToIcon(globalKey),
                  position: LatLng(35.8400, 50.9391),
                ),
              );
              setState(() {});
            },
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        ),
      ],
    );
  }
}

MyMarker 类包含要转换为标记图标的Widget

class MyMarker extends StatelessWidget {
  MyMarker(this.globalKeyMyWidget);
  final GlobalKey globalKeyMyWidget;

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      key: globalKeyMyWidget,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 250,
            height: 180,
            decoration: BoxDecoration(color: Colors.black, shape: BoxShape.circle),
          ),
          Container(
            width: 220,
            height: 150,
            decoration: BoxDecoration(color: Colors.amber, shape: BoxShape.circle),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.accessibility,
                  color: Colors.white,
                  size: 35,
                ),
                Text(
                  'Widget',
                  style: TextStyle(color: Colors.white, fontSize: 25),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

现在我们有了自定义Widget的标记

函数列表

• widgetToMarker：从自定义Widget生成图标标记。
• svgAsset：从资产文件夹中的SVG文件生成图标标记。
• pictureAsset：从资产文件夹中的图片文件生成图标标记。
• pictureAssetWithCenterText：从资产文件夹中的图片文件生成带有中心文本的图标标记。
• circleCanvasWithText：生成带有中心文本的圆形画布图标标记。
• downloadResizePicture：从互联网下载并调整大小的图片文件生成图标标记。
• downloadResizePictureCircle：从互联网下载并调整大小的圆形图片文件生成图标标记，并可添加边框。

完整示例代码

import 'package:custom_marker/marker_icon.dart';
import 'package:flutter/rendering.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Set<Marker> _markers = <Marker>{};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: CameraPosition(target: LatLng(32.4279, 53.6880), zoom: 15),
        markers: _markers,
      ),
      floatingActionButton: FloatingActionButton.extended(
        label: FittedBox(child: Text('Add Markers')),
        onPressed: () async {
          _markers.add(
            Marker(
              markerId: MarkerId('svgAsset'),
              icon: await MarkerIcon.svgAsset(assetName: 'assets/car.svg', context: context, size: 50),
              position: LatLng(35.8400, 50.9391),
            ),
          );

          _markers.add(
            Marker(
              markerId: MarkerId('downloadResizePicture'),
              icon: await MarkerIcon.downloadResizePicture(
                  url: 'https://thegpscoordinates.net/photos/la/tehran_iran_5u679ezi8f.jpg', imageSize: 150),
              position: LatLng(35.6892, 51.3890),
            ),
          );

          _markers.add(
            Marker(
              markerId: MarkerId('downloadResizePictureCircle'),
              icon: await MarkerIcon.downloadResizePictureCircle(
                  'https://thegpscoordinates.net/photos/la/tehran_iran_5u679ezi8f.jpg',
                  size: 150,
                  addBorder: true,
                  borderColor: Colors.white,
                  borderSize: 15),
              position: LatLng(34.6416, 50.8746),
            ),
          );

          setState(() {});
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

希望这些信息对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。