Cómo crear un círculo en la ubicación actual en flutter

Este artículo ha sido evaluado por nuestros especialistas para que tengas la seguridad de la exactitud de nuestra esta noticia.

Solución:

Esta funcionalidad ahora está disponible en el paquete google_maps_flutter:

https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/Circle-class.html

Ejemplo parcial:

Set circles = Set.from([Circle(
    circleId: CircleId(id),
    center: LatLng(latitude, longitude),
    radius: 4000,
)]);

GoogleMap(
    mapType: MapType.normal,
    myLocationEnabled: true,
    myLocationButtonEnabled: true,
    initialCameraPosition: initialMapLocation,
    onMapCreated: (GoogleMapController controller) 
      _controller.complete(controller);
    ,
    onCameraMove: null,
    circles: circles,
  );

Si usa el complemento flutter_map, puede dibujar un círculo de radio fácilmente. Aquí está el código.

FlutterMap(
    options: MapOptions(
        center: LatLng(latitude, longitude),
        zoom: 16.0
    ),
    layers: [
        TileLayerOptions(
            urlTemplate: "map url",
            additionalOptions:  
            "accessToken" : "xxx",
            "id" : "map id"
            
        ), 
        MarkerLayerOptions(
            markers: Marker( //marker
                width: 25.0,
                height: 25.0,
                point: LatLng(latitude, longitude),
                builder: (context) 
                return Container(
                    child: IconButton(
                        icon: Icon(Icons.my_location),
                        iconSize: 25.0,
                        color: Color(0xff9045f7),
                        onPressed: () 
                            print('marker tapped');
                        ,
                        ),
                    );
                
            )
        ),
        CircleLayerOptions(
            circles: CircleMarker( //radius marker
                point: LatLng(latitude, longitude),
                color: Colors.blue.withOpacity(0.3),
                borderStrokeWidth: 3.0,
                borderColor: Colors.blue,
                radius: 100 //radius
            )
        )
    ],
),)

Te invitamos a asistir nuestra función dejando un comentario o valorándolo te lo agradecemos.

---

---

Utiliza Nuestro Buscador