如何将额外的文本添加到Google Map自定义标记中? [英] How to add extra into text into flutter google map custom marker?

问题描述

问题是如何在自定义Google地图标记上的文字重叠处注入代表车辆登记号码的文字.

The problem is how to infuse text overlap on the custom google map marker with text which represents the vehicle registration number.

我尝试使用此方法将文本覆盖在图标上 生成器:(上下文)=>() 但是根本无法识别.

I have tried to use this method to have the text overlay on the icon builder: (context) =>() But is not recognized at all.

  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/[e-mail]";
          
          
         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,
              ),
            ),
          );
       
        })
      );
    
  }
  
}

如果您发现图标右侧的空白是我希望显示注册号的位置，那么我所显示的是图标正确显示.

What I have shown is the icon appear correctly if you notice the white space on the right of the icon is where I want the registration number to appear.

推荐答案

尝试一下:

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

这篇关于如何将额外的文本添加到Google Map自定义标记中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！