我们如何创建自定义标记图标在谷歌MapFlutter

ozxc1zmp 于 2023-06-24 发布在 Flutter

关注(0)|答案(4)|浏览(172)

我使用谷歌Map显示用户的位置。我需要一个自定义标记显示用户的位置。用户图像是从URL获取。但我不能像在www.example.com代码所示的形状image.my标记如下。与我的代码，我不能实现所需的背景形状。谁来帮帮我。

Future<void> getMarkerIcon(String imagePath, Size size) async {
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);

    final Radius radius = Radius.circular(size.width / 2);

    final Paint tagPaint = Paint()..color = Utils.myColor.primary;
    final double tagWidth = 20.0;

    final Paint shadowPaint = Paint()..color = Colors.white;
    final double shadowWidth = 2.0;

    final Paint borderPaint = Paint()..color = Colors.white;
    final double borderWidth = 2.0;

    final double imageOffset = shadowWidth + borderWidth;

    // Add shadow circle
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(0.0, 0.0, size.width, 100),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        shadowPaint);

    // Add border circle
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(
              shadowWidth, shadowWidth, size.width - (shadowWidth * 2), 100),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        borderPaint);

    // Oval for the image
    Rect oval = Rect.fromLTWH(imageOffset, imageOffset,
        size.width - (imageOffset * 2), size.height - (imageOffset * 2));

    // Add path for oval image
    canvas.clipPath(Path()..addOval(oval));

    // Add image
    ui.Image image = await getImageFromPath(
        imagePath); // Alternatively use your own method to get the image
    paintImage(canvas: canvas, image: image, rect: oval, fit: BoxFit.fitWidth);

    // Convert canvas to image
    final ui.Image markerAsImage =
        await pictureRecorder.endRecording().toImage(size.width.toInt(), 100);

    // Convert image to bytes
    final ByteData byteData =
        await markerAsImage.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List uint8List = byteData.buffer.asUint8List();
    setState(() {
      markerIcon = BitmapDescriptor.fromBytes(uint8List);
    });
  }

  Future<ui.Image> getImageFromPath(String imagePath) async {
    File imageFile = await DefaultCacheManager().getSingleFile(imagePath);

    Uint8List imageBytes = imageFile.readAsBytesSync();

    final Completer<ui.Image> completer = new Completer();

    ui.decodeImageFromList(imageBytes, (ui.Image img) {
      return completer.complete(img);
    });

    return completer.future;
  }

flutter

来源：https://stackoverflow.com/questions/67585895/how-do-we-create-custom-marker-icon-in-google-map-flutter

4条答案

按热度按时间

lokaqttq1#

检查https://pub.dev/packages/custom_map_markers以将任何Widget渲染为标记。使用小部件可能更容易实现您想要的特定外观

赞(0）回复(0）举报 2023-06-24

vkc1a9a22#

class _PostedMapState extends State<PostedMap> {
          Completer<GoogleMapController> _mapController = Completer();
          Uint8List imageDataBytes;
          var markerIcon;
          GlobalKey iconKey = GlobalKey();
        
          @override
          void initState() {
            super.initState();
//            if (widget.userImage != '') {
//              Future.delayed(Duration(seconds: 5), () {
//                getCustomMarkerIcon(iconKey);
//              });
//            }
WidgetsBinding.instance.addPostFrameCallback(getCustomMarkerIcon(iconKey));
          }
        
          @override
          Widget build(BuildContext context) {
            // TODO: implement build.
            return Container(
              height: widget.height,
              width: widget.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              // margin: EdgeInsets.only(left: 20, right: 20),
              child: Stack(
                children: [
                  getMarkerWidget(),
                  Card(
                    child: GoogleMap(
                      mapType: MapType.normal,
                      onTap: (x) {
                        MapsLauncher.launchCoordinates(
                            widget.checkInLat.toDouble(), widget.checkInLon.toDouble());
                      },
                      zoomControlsEnabled: false,
                      zoomGesturesEnabled: false,
                      mapToolbarEnabled: false,
                      trafficEnabled: false,
                      tiltGesturesEnabled: false,
                      scrollGesturesEnabled: false,
                      rotateGesturesEnabled: false,
                      myLocationEnabled: false,
                      liteModeEnabled: false,
                      indoorViewEnabled: false,
                      initialCameraPosition: CameraPosition(
                        target: LatLng(
                          double.parse(widget.checkInLat),
                          double.parse(widget.checkInLon),
                        ),
                        zoom: 14.4746,
                      ),
                      onMapCreated: (GoogleMapController controller) {
                        controller.setMapStyle(mapStyle);
                        // _mapController = controller;
                        try {
                          _mapController.complete(controller);
                        } catch (err) {
                          Log.e("err", err);
                        }
                      },
                      myLocationButtonEnabled: false,
                      markers: Set<Marker>.of(
                        <Marker>[
                          Marker(
                              draggable: false,
                              markerId: MarkerId(widget.userImage),
                              position: LatLng(double.parse(widget.checkInLat),
                                  double.parse(widget.checkInLon)),
                              // icon: currentLocationIcon,
                              icon: markerIcon ?? BitmapDescriptor.defaultMarker),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          }
        
          Future<void> getCustomMarkerIcon(GlobalKey iconKey) async {
            RenderRepaintBoundary boundary = iconKey.currentContext.findRenderObject();
            ui.Image image = await boundary.toImage(pixelRatio: 3.0);
            ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
            var pngBytes = byteData.buffer.asUint8List();
            setState(() {
              markerIcon = BitmapDescriptor.fromBytes(pngBytes);
            });
          }
        
          getMarkerWidget() {
            return Transform.translate(
              offset: Offset(50, 50),
              child: RepaintBoundary(
                key: iconKey,
                child: SizedBox(
                  height: 40,
                  width: 40,
                  child: Stack(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(
                                '${ASSETS.assetImage("/map_pin_icon2.png")}'),
                            fit: BoxFit.fitHeight,
                          ),
                        ),
                      ),
                      Positioned(
                        left: 5,
                        top: 6,
                        child: ClipOval(
                          child: Container(
                            width: 20,
                            height: 20,
                            child: CommonWidgets().buildCachedNetworkImage(
                              '${widget.userImage}',
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            );
          }
        }

赞(0）回复(0）举报 2023-06-24

sdnqo3pr3#

你可以尝试将widget作为标记，说明如下：
custom map marker
已更新
add WidgetsBinding.instance.addPostFrameCallback

赞(0）回复(0）举报 2023-06-24

41ik7eoe4#

尝试使用这个在线工具。这些对我帮助很大。shapemaker.web.app

赞(0）回复(0）举报 2023-06-24