gmap 的图标 (BitmapDescriptor) 中的图像

Question

我正在尝试为我的谷歌地图标记创建一个 bmp 图标。我需要动态添加不同的背景图片以适应循环中的圆圈。不太确定如何解决这个问题，因为我是新手，实际上有什么方法可以在尝试执行此操作时预览 mapbitdescriptor 吗？基本上，我需要在该循环中使用一个以图像为背景的圆圈。

  Future<BitmapDescriptor> customBitMap(String imageUrl) async {

    final myImage = await Image(image: AssetImage('assets/images/icon.png'));
    final pictureRecorder = ui.PictureRecorder();
    final canvas = Canvas(pictureRecorder);

    
        
    final recordedPicture = pictureRecorder.endRecording();
    final img = await recordedPicture.toImage(20, 20);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);

    return BitmapDescriptor.fromBytes(data!.buffer.asUint8List());
  }

Answer 1

我从您的问题中了解到，您希望在该标记的圆圈内显示图像。

为此，您可以使用 Stack 小部件。您必须将标记图像和要显示的图像都放在 Stack 中并相应地定位它们。

看这个例子，我试过用Stack

Stack(
                children: [
// Widget to display image inside the marker
                  Positioned(
                    top:10,
                    left: 25,
                    child: Container(
                      width: 120,
                      height: 120,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 2),
                          image: DecorationImage(image: AssetImage("assets/images/f3.png")),
                          borderRadius: BorderRadius.circular(60),
                        ),
                        child: Container()),
                  ),
// Marker image
                  Image.asset('assets/images/marker.png'),
                ],
              ),

Check Output Here

您可以根据需要调整高度、宽度和位置！

Answer 2

将图标分成两个图标。第一个_img1 是图标，但缺少中间要填充背景的部分。不是白！但是透明！但是第二个_img2 只是您想要用图像填充的图标的一部分。但是两个图像应该具有相同的大小。 _background 是本案例中的城市形象。确保图标的背景不是白色而是透明的！

// draw the background
canvas.drawImage(_background, Offset(0,0), Paint());

// Save the current layer of the canvas with BlendMode.dstATop
// Everything that was drawn before this call will only be
// drawn at top of things that will be drawn between saveLayer and restore
canvas.saveLayer(null, Paint()..blendMode = BlendMode.dstATop);

// draw image 2
canvas.drawImage(_img2, Offset(0,0), Paint());

// restore canvas
canvas.restore();

// draw image 1
canvas.drawImage(_img1, Offset(0,0), Paint());

Answer 3

在我的项目中，我正在使用此代码并且它有效。

  Future<BitmapDescriptor> getIcon({required String imagePath}) async {
    final Uint8List markerIcon =
        await getBytesFromAsset(imagePath, 60);
    BitmapDescriptor icon = BitmapDescriptor.fromBytes(markerIcon);
    return icon;
  }

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