Flutter标记图标插件marker_icon的使用

Flutter标记图标插件marker_icon的使用

概述

marker_icon 是一个用于将Flutter中的Widget、本地图片、网络图片和SVG文件转换为 BitmapDescriptor 的插件，这些 BitmapDescriptor 可以在 google_maps_flutter 中用作地图标记（Marker）的图标。

开始使用

添加依赖

首先，在 pubspec.yaml 文件中添加 marker_icon 依赖：

dependencies:
  marker_icon: ^0.7.1

添加带边框的圆形网络图片标记

以下代码展示了如何从网络图片创建一个带边框的圆形标记图标，并将其添加到地图上：

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

注意事项

1. 异步函数：你必须在异步函数中添加标记。
2. 其他函数：除了将Widget转换为标记外，所有其他函数的工作方式与此类似。

将Widget转换为标记

MyMap 类包含Google Map小部件

MyMap 类用于管理Google Map小部件，并处理将自定义Widget转换为标记图标的功能。

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

  [@override](/user/override)
  _MyMapState createState() => _MyMapState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Stack(
            children: [
              // 将你的Widget添加到同一个Widget树中
              // 在Stack中添加Google Map
              // 在Google Map之前声明标记
              // 将全局键传递给你的Widget
              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 {
              // 调用widgetToIcon函数并传递相同的全局键
              _markers.add(
                Marker(
                  markerId: MarkerId('circleCanvasWithText'),
                  icon: await MarkerIcon.widgetToIcon(globalKey),
                  position: LatLng(35.8400, 50.9391),
                ),
              );
              setState(() {});
            },
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        ),
      ],
    );
  }
}

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

MyMarker 类用于定义要转换为标记图标的自定义Widget。

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

  [@override](/user/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的标记

函数列表

marker_icon 提供了以下功能：

• widgetToMarker：从自定义Widget创建标记图标。
• svgAsset：从资产文件夹中的SVG文件创建标记图标。
• pictureAsset：从资产文件夹中的图片（png、jpeg等）创建标记图标。
• pictureAssetWithCenterText：从资产文件夹中的图片（png、jpeg等）创建带有中心文本的标记图标。
• circleCanvasWithText：创建带有中心文本的圆形画布标记图标。
• downloadResizePicture：从互联网下载并调整大小的图片创建标记图标。
• downloadResizePictureCircle：从互联网下载并调整大小的圆形图片（带边框）创建标记图标。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 marker_icon 插件来创建不同类型的标记图标并将其添加到Google Map上。

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

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

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

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

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

  [@override](/user/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('circleCanvasWithText'),
              icon: await MarkerIcon.circleCanvasWithText(
                size: Size(80, 80),
                text: 'Hi',
                circleColor: Colors.red,
                fontColor: Colors.white,
                fontSize: 22,
              ),
              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,
    );
  }
}