Marker icons not centered when using AnchorAlign.center

[S-Man42]

Hi!

I set up a map with two markers and a polyline between them. I wanted the markers to be centered on the end points of the line. For that I used AnchorPos.align(AnchorAlign.center). But it seems that the markers are not center. Otherwise the points of the polyline are not drawn correctly:

return FlutterMap(
      options: MapOptions(
          center: computeCentroid(widget.points),
          zoom: _getBoundsZoomLevel().toDouble(),
          minZoom: 1.0,
          maxZoom: 18.0),
      layers: [
        TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(
            markers: [
              Marker(
                  width: 25.0,
                  height: 25.0,
                  point: LatLng(52.0, 0.0),
                  anchorPos: AnchorPos.align(AnchorAlign.center),
                  builder: (context) {
                    return Container(
                      child: IconButton(
                        icon: Icon(Icons.my_location),
                        iconSize: 25.0,
                        color: Color(0xff9045f7),
                      ),
                    );
                  }),
              Marker(
                  width: 25.0,
                  height: 25.0,
                  point: LatLng(52.025, 0.0596),
                  anchorPos: AnchorPos.align(AnchorAlign.center),
                  builder: (context) {
                    return Container(
                      child: IconButton(
                        icon: Icon(Icons.my_location),
                        iconSize: 25.0,
                        color: Color(0xff9045f7),
                      ),
                    );
                  }),
        ]),
        PolylineLayerOptions(polylines: [
          Polyline(
            points: [LatLng(52.0, 0.0), LatLng(52.025, 0.0596)],
            strokeWidth: 3.0,
            color: Colors.red,
          )
        ])
      ],
    );

Is this a bug or did I miss something?

Is there a way to set the Anchor to the horizontal center, but vertical bottom?

[quai20]

Hi,
I struggled with the same issue. Since your custom icon has an IconSize, you don't need width and height for your Marker. That's why it's shifted.

[maRci002]

Use width: double.infinity, height: double.infinity in Marker.

[aliasghar144]

I fix it :)

first need markerSize
double markerSized = 28.0;

in MarkLayer

Marker(

                        point: LatLng(10.10,10,10),
                        child: Stack(
                          alignment: Alignment.center,
                          clipBehavior: Clip.none,
                          children: [
                            Positioned(
                              bottom: 15,
                              child: Icon(
                                Icons.location_on_sharp,
                                size: markerSized,
                                color: Colors.red,
                              ),
                            ),
                          ],
                        ),
                        alignment: Alignment.center)

in option

options: MapOptions(
          onPositionChanged: (position, hasGesture) {
            if (hasGesture) {
              setState(() {
                markerSized = (28.0 * (position.zoom! / 9.5));
              });
            }
          },
        )

DONE