无法向 Google Maps Flutter 添加标记

Question

我正在尝试向 Flutter 添加标记 Google 但无法向其添加图标。我正在共享代码，我得到的错误是，"mapMarker" 不能为空。

它在没有 'Uint8List' 的情况下确实有效，但图标太大，所以我需要调整它的大小。添加小资产不是一种选择，因为质量越来越差。

我是运行这个代码：

class _Harita extends State<Harita> {
  Completer<GoogleMapController> _controller = Completer();
  Set<Marker> _markers = {};
  BitmapDescriptor? mapMarker;
  BitmapDescriptor? mapMarker1;


  void initState() {
    setCustomMarker();
    super.initState();
  }

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(41.6018963, 36.0805428),
    zoom: 12.06,
  );

  Future<Uint8List> getBytesFromAsset(
      {required String path, required int width}) async {
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
        targetWidth: width);
    ui.FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
        .buffer
        .asUint8List();
  }

  void setCustomMarker() async {
    final Uint8List customMarker = await getBytesFromAsset(
        path: ('assets/images/golmarker.png'), width: 200);

    setState(() {
      mapMarker = BitmapDescriptor.fromBytes(customMarker);
    });
  }

  void _onMapCreated(GoogleMapController controller) {
    sleep(Duration(seconds: 5));
    setState(() {
      _markers.add(
        Marker(
            markerId: MarkerId('1'),
            icon: mapMarker!,
            position: LatLng(41.566743, 36.093695),
            infoWindow: InfoWindow(
                title: 'Uzun Göl',
                snippet: 'Kızılırmak Deltasındaki Acı Göller İçerisindedir.')),
      );
      _controller.complete(controller);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: <Widget>[
            GoogleMap(
              markers: _markers,
              onMapCreated: _onMapCreated,
              mapType: MapType.normal,
              initialCameraPosition: _kGooglePlex,
              /*onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },*/
            ),
            Positioned(
              top: 60,
              left: 20,
              child: InkWell(
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                      color: Colors.white, shape: BoxShape.circle),
                  child: Icon(
                    Icons.close,
                    size: 25,
                  ),
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ),
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FloatingActionButton.extended(
                  backgroundColor: Color.fromRGBO(74, 112, 217, 2),
                  heroTag: "qrcodefalanbruh",
                  onPressed: () {
                    Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(
                            builder: (BuildContext context) => super.widget));
                  },
                  icon: Icon(Icons.location_searching, color: Colors.white),
                  label:
                      Text('Ortalama', style: TextStyle(color: Colors.white))),
            ],
          ),
        ));
  }
}

Answer 1

我通过将变量放入标记列表来修复它。

void _onMapCreated(GoogleMapController controller) async {
final Uint8List customMarker = await getBytesFromAsset(
    path: ('assets/images/golmarker.png'), width: 200);
mapMarker = BitmapDescriptor.fromBytes(customMarker);
setState(() {
  _markers.add(
    Marker(
        markerId: MarkerId('1'),
        icon: mapMarker!,
        position: LatLng(41.566743, 36.093695),
        infoWindow: InfoWindow(
            title: 'Uzun Göl',
            snippet: 'Kızılırmak Deltasındaki Acı Göller İçerisindedir.')),
  );
  _controller.complete(controller);
});

Answer 2

here is the solution to add marker in googlemap if you find your solution.then it will help some other persons in future

  final _pickMarkerId = const MarkerId('start');
  final Map<MarkerId, Marker> _locationMarkers = <MarkerId, Marker>{};

  await _getPickIcon();

   _locationMarkers[_pickMarkerId] = Marker(
        markerId: _pickMarkerId,
        position: _start,
        icon: _pickIcon ?? BitmapDescriptor.defaultMarker,
      );


  _getPickIcon() async {
    if (_pickIcon != null) {
      return _pickIcon;
    }
    return _pickIcon = await convertIcon(put here your image);
  }

  Future<BitmapDescriptor?> convertIcon(image) async {
    ByteData data = await rootBundle.load(image);
    ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: 120);
    ui.FrameInfo fi = await codec.getNextFrame();
    Uint8List? bytes = (await fi.image.toByteData(format: ui.ImageByteFormat.png))?.buffer.asUint8List();
    return BitmapDescriptor.fromBytes(bytes!);
  }

use this line in google map marker

GoogleMaps(

marker:locationMarkers.values.toSet()

无法向 Google Maps Flutter 添加标记

Can't add marker to Google Maps Flutter

google-maps

dart

flutter