web-dev-qa-db-fra.com

Marqueurs personnalisés avec le plugin Flutter Google Maps

Existe-t-il un moyen d'afficher des marqueurs personnalisés avec le plugin officiel Flutter Google Maps sur la carte? Impossible de trouver un moyen de le faire sur la base de la documentation.

google-mapspluginsflutter
7
Dmitry Buzolin

J'utilise:

controller.addMarker(MarkerOptions(
  icon: BitmapDescriptor.fromAsset("images/restaurant.png"),
  position: LatLng(40.017870, -105.278350),
));

Cela fonctionne bien sur Android, mais cela ne fonctionne pas sur iOS.

5
Franzé Jr.

selon le nouveau plugin BitmapDescriptor.fromAsset ("images/restaurant.png") ne fonctionne pas correctement alors référez-vous link et trouvez ma solution.

Future<BitmapDescriptor> _getAssetIcon(BuildContext context) async {
final Completer<BitmapDescriptor> bitmapIcon =
    Completer<BitmapDescriptor>();
final ImageConfiguration config = createLocalImageConfiguration(context);

const AssetImage('assets/red_square.png')
    .resolve(config)
    .addListener((ImageInfo image, bool sync) async {
  final ByteData bytes =
      await image.image.toByteData(format: ImageByteFormat.png);
  final BitmapDescriptor bitmap =
      BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
  bitmapIcon.complete(bitmap);
});

return await bitmapIcon.future;}

et l'utiliser comme ça

void _add(LatLng position,String address) async{
final MarkerId markerId = MarkerId('1');
BitmapDescriptor markericon = await _getAssetIcon(context);

// creating a new MARKER
final Marker marker = Marker(
  markerId: markerId,
  position: position,
  infoWindow: InfoWindow(title: address, snippet: 'go here'),
  icon: markericon
);

setState(() {
  _markers[markerId] = marker;
});}

j'espère que cela fonctionne pour vous.

2
kapil singh

BitmapDescriptor.fromAsset est obsolète

Utilisation BitmapDescriptor.fromImageAsset au lieu.

Il respecte le DPI de l'appareil lors du choix de l'actif approprié. Voir Déclaration des ressources d'image sensibles à la résolution .

1
Ryan R

En fait, seul le code commenté de exemple de référentiel de google_maps fonctionne ... parce que le fld sdk a quelques changements dans les API (enfin je suis actuellement en 1.8)

Donc, c'est la fonction, la même que kapil répond avec quelques changements dans les API, il vous suffit de changer la ligne 'assets/red_square.png' pour votre route d'image.

   Future<BitmapDescriptor> _getAssetIcon(BuildContext context) async {
   final Completer<BitmapDescriptor> bitmapIcon =
       Completer<BitmapDescriptor>();
   final ImageConfiguration config = createLocalImageConfiguration(context);

   const AssetImage('assets/red_square.png')
       .resolve(config)
       .addListener(ImageStreamListener((ImageInfo image, bool sync) async {
     final ByteData bytes =
         await image.image.toByteData(format: ImageByteFormat.png);
     final BitmapDescriptor bitmap =
         BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
     bitmapIcon.complete(bitmap);
   }));

   return await bitmapIcon.future;
 }

Probablement si vous créez une variable BitMapDescriptor, vous n'avez besoin d'appeler cette fonction que la première fois, avant d'ajouter des marqueurs, mais n'oubliez pas le "attendre".

Il est également recommandé de mettre 2 autres images de plus grande taille dans des dossiers avec des noms (2.0x et 3.0x), vous pouvez voir la résolution dans le images d'exemple

N'oubliez pas de commenter "/ assets" dans votre pubspec.yaml

1
Hector Aguero

**Essaye ça,

_createMarkerImageFromAsset("assets/locationMarker.png");

 Future <BitmapDescriptor> _createMarkerImageFromAsset(String iconPath) async {
    ImageConfiguration configuration = ImageConfiguration();
     bitmapImage = await BitmapDescriptor.fromAssetImage(
        configuration,iconPath);
    return bitmapImage;
  }

définir bitmapImage sur marqueur

 Marker(
        markerId: MarkerId('value'),
        icon: bitmapImage,
        position: LatLng(),
       );
1
Navin Kumar

Changer l'icône du marqueur

MarkerOptions(
position: LatLng(41.4219999, 63.0862462),
infoWindowText: InfoWindowText("Yur Title", "Your Content"),
icon: BitmapDescriptor.fromAsset('images/your_image.png',),
),
0
Faxriddin Abdullayev