如何将额外的文本添加到颤动的谷歌地图自定义标记中？

Question

问题是如何在自定义谷歌地图标记上使用代表车辆登记号的文本注入重叠文本。

我曾尝试使用此方法在图标上叠加文字 建设者：（上下文）=>（） 但根本不认识。

  class MapsDemo extends StatefulWidget {
    @override
    State createState() => MapsDemoState();
  }

class MapsDemoState extends State<MapsDemo> {

  GoogleMapController mapController;
 //Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.contacts]);import 'package:permission_handler/permission_handler.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
            children: <Widget>[
            Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: GoogleMap(
                 onMapCreated: (GoogleMapController controller) {
                   mapController = controller;
                 },
                ),
            ),
           ],
         ),
         floatingActionButton: FloatingActionButton(onPressed: () {
        
          double mq1 = MediaQuery.of(context).devicePixelRatio;
          String icon = "images/car.png";
          if (mq1>1.5 && mq1<2.5) {icon = "images/car2.png";}
          else if(mq1 >= 2.5){icon = "images/car3.png";}
          print("Mq 1"+mq1.toStringAsFixed(5));
          String iconPath="lib/assets/move@3x.png";
          
          
         mapController.addMarker(
              MarkerOptions(
                position: LatLng(37.4219999, -122.0862462),
                infoWindowText: InfoWindowText("TEST","TEST"),
                icon: BitmapDescriptor.fromAsset(iconPath),
                consumeTapEvents: true,
                
                /*builder: (context) =>(

                )*/

                //icon:BitmapDescriptor.fromAsset(assetName)
              ),
         );
         
         mapController.addMarker(
              MarkerOptions(
                position: LatLng(38.4219999, -122.0862462),
                infoWindowText: InfoWindowText("tt","adfaf"),
                icon: BitmapDescriptor.fromAsset("lib/assets/logo.png"),
                anchor: Offset(100,160),
              
                //icon:BitmapDescriptor.fromAsset(assetName)
              ),
         );
       
         mapController.animateCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: LatLng(37.4219999, -122.0862462),
               
                zoom: 15.0,
              ),
            ),
          );
       
        })
      );
    
  }
  
}

如果您注意到图标右侧的空白区域是我希望注册号出现的位置，我所显示的是正确显示的图标。

Answer 1

试试这个：

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

class MapsDemo extends StatefulWidget {
  @override
  State createState() => MapsDemoState();
}

class MapsDemoState extends State<MapsDemo> {
  final Set<Marker> _markers = {};

  void _onAddMarkerButtonPressed() {
    print('in _onAddMarkerButtonPressed()');
    setState(() {
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId("111"),
        position: LatLng(30.666, 76.8127),
        infoWindow: InfoWindow(
          title: "bingo! This works",
        ),
        icon: BitmapDescriptor.defaultMarker,
      ));
    });
    print('setState() done');
  }

  GoogleMapController mapController;
  //Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.contacts]);import 'package:permission_handler/permission_handler.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: GoogleMap(
                markers: _markers,
                onMapCreated: (GoogleMapController controller) {
                  mapController = controller;
                },
                initialCameraPosition:
                    CameraPosition(target: LatLng(30.666, 76.8127), zoom: 15),
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          print('in fab()');
          double mq1 = MediaQuery.of(context).devicePixelRatio;



          _onAddMarkerButtonPressed();

          mapController.animateCamera(
            CameraUpdate.newCameraPosition(
              CameraPosition(
                target: LatLng(30.666, 76.8127),
                zoom: 15.0,
              ),
            ),
          );
        }));
  }
}

Answer 2

我通过创建一个返回 a 的函数来解决/解决这个问题，然后我在初始化标记时将其返回和解析的值作为图标传递：

很抱歉，我不记得为什么用神奇的 40 和 20 常量填充该方法。可能是通过我当时正在渲染的视觉测试计算得出的。

Future<BitmapDescriptor> createCustomMarkerBitmap(/* your args here */) async {

PictureRecorder recorder = new PictureRecorder();
Canvas c = new Canvas(recorder);

/* Do your painting of the custom icon here, including drawing text, shapes, etc. */

Picture p = recorder.endRecording();
ByteData pngBytes = await (await p.toImage(
    tp.width.toInt() + 40, tp.height.toInt() + 20))
    .toByteData(format: ImageByteFormat.png);

Uint8List data = Uint8List.view(pngBytes.buffer);

return BitmapDescriptor.fromBytes(data);
}

那么在创建marker的时候，可以传入BitmapDescriptor作为icon，像这样：

createCustomMarkerBitmap(...).then((BitmapDescriptor bitmapDescriptor) {

_markers.add(新标记( /* 除了你的其他属性：*/ 图标：位图描述符， )); });

或：

BitmapDescriptor bitmapDescriptor = await createCustomMarkerBitmap(...);

标记标记=标记（ /* 除了你的其他属性：*/ 图标：位图描述符 );

如果有帮助，请告诉我。哥！

我找到了这个 github 问题的答案