概述

一个可以将 Widget、本地图片、网络图片、Svg 文件转换为 BitmapDescriptor 的包，该包可用于 google_maps_flutter 图标标记。

开始

添加依赖

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

1. 除 widget 转 marker 外，所有其他功能与上面相同。

Widget 转 Marker

MyMap 类包含您的 googleMap widget

class MyMap extends StatefulWidget {
  const WidgetToMarker({Key? key}) : super(key: key);
  @override
  _WidgetToMarkerState createState() => _WidgetToMarkerState();
}
class _WidgetToMarkerState extends State<WidgetToMarker> {

  Set<Marker> _markers = <Marker>{};
  
  // declare a global key   
  final GlobalKey globalKey = GlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          body: Stack(
            children: [
            
              // you have to add your widget in the same widget tree
              // add your google map in stack
              // declare your marker before google map
              // pass your global key to your 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 {
            
              // call widgetToIcon Function and pass the same global key
              
              _markers.add(
                Marker(
                  markerId: MarkerId('circleCanvasWithText'),
                  icon: await MarkerIcon.widgetToIcon(globalKey),
                  position: LatLng(35.8400, 50.9391),
                ),
              );
              setState(() {});
            },
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerFloat,
        ),
      ],
    );
  }
}

MyMarker 类包含您想将其转换为 marker icon 的 widget

class MyMarker extends StatelessWidget {
  // declare a global key and get it trough Constructor

  MyMarker(this.globalKeyMyWidget);
  final GlobalKey globalKeyMyWidget;

  @override
  Widget build(BuildContext context) {
    // wrap your widget with RepaintBoundary and
    // pass your global key to RepaintBoundary
    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 : 来自 asset 文件夹的 svg 图标标记。
  • pictureAsset : 来自 asset 文件夹的图片（png、jpeg 等）图标标记。
  • pictureAssetWithCenterText : 来自 asset 文件夹的带文字的图片（png、jpeg 等）图标标记。
  • circleCanvasWithText : 带文字的圆形画布。
  • downloadResizePicture : 来自互联网的图片（png、jpeg 等）图标标记。
  • downloadResizePictureCircle : 来自互联网的带边框的圆形图片（png、jpeg 等）图标标记。

注意事项

这最初来自 https://github.com/mmolaei7878/custom_marker。由于 intl 崩溃且未更新，这是重新分叉并使其适用于最新版本的 Flutter。

GitHub

查看 Github