2
votes

Comment dessiner une polyligne sur une carte Google en flutter

J'essaie de dessiner une polyligne entre deux emplacements à l'aide de la bibliothèque de cartes Google Flutter.

// here the  Map Body

          body:Container(
        child: GoogleMap(
          myLocationEnabled: true,
          mapType: MapType.hybrid,
          onMapCreated: (GoogleMapController controller){
            mapController=controller;
          }, 
          initialCameraPosition: CameraPosition(
           target: center,
           zoom: 11.0 
         ),
         markers:  markers,
        ),
      ),

flutter dart google-maps google-polyline

0 commentaires

3 Réponses :

0
votes

si vous utilisez le plugin goole_maps_flutter, sur la version 0.5.6, le support des polylignes a été ajouté à GoogleMaps. https://pub.dev/packages/google_maps_flutter#056

vous pouvez l'ajouter similaire à la façon dont vous ajoutez des marqueurs:

body:Container(
    child: GoogleMap(
      myLocationEnabled: true,
      mapType: MapType.hybrid,
      onMapCreated: (GoogleMapController controller){
        mapController=controller;
      }, 
      initialCameraPosition: CameraPosition(
       target: center,
       zoom: 11.0 
     ),
     markers:  markers,
     polylines: polylines, // Set<Polyline>
    ),
  ),

consultez l'exemple suivant:

https://github.com/flutter/plugins/blob/master/packages/google_maps_flutter/example/lib/place_polyline .dart

0 commentaires

0
votes

Je suppose que vous avez trouvé une solution à ce problème, mais juste au cas où quelqu'un d'autre se trouverait ici ...

Voici comment procéder.

List<Polyline> _polyLine = [];

_polyLine.add(Polyline(
        polylineId: PolylineId("route1"),
        color: Colors.blue,
        patterns: [
          PatternItem.dash(20.0),
          PatternItem.gap(10)
        ],
        width: 3,
        points: [
          LOCATION_A,
          LOCATION_B,
        ],
      ));
.
.
.
.

GoogleMap(
          myLocationEnabled: true,
          mapType: MapType.hybrid,
          onMapCreated: (GoogleMapController controller){
            mapController=controller;
          }, 
          initialCameraPosition: CameraPosition(
           target: center,
           zoom: 11.0 
         ),
         markers:  markers,
         polylines: _polyLine.toSet(),
),

0 commentaires

0
votes

Utilisez les polygones du widget Google () et essayez comme ceci

getPoints() {
    return [
      LatLng(6.862472, 79.859482),
      LatLng(6.862258, 79.862325),
      LatLng(6.863121, 79.863644),
      LatLng(6.864538, 79.865039),
      LatLng(6.865124, 79.864546),
      LatLng(6.866451, 79.864667),
      LatLng(6.867303, 79.86544),
      LatLng(6.867899, 79.865826),
      LatLng(6.867867, 79.866727),
      LatLng(6.864884, 79.870333),
      LatLng(6.861859, 79.873112),
      LatLng(6.861593, 79.87499),
      LatLng(6.860837, 79.876427),

    ];
  }

mettez vos coordonnées dans

getPoint ()

        GoogleMap(
                    markers: markersAr,
                    myLocationEnabled: true,
                    initialCameraPosition: CameraPosition(
                      target: LatLng(6.843369, 79.874814),

                      zoom: 12.99,
                    ),
                    polygons: Set<Polygon>.of(<Polygon>[
                      Polygon(
                          polygonId: PolygonId('area'),
                          points: getPoints(),
                          geodesic: true,
                          strokeColor: Colors.red.withOpacity(0.6),
                          strokeWidth: 5,
                          fillColor: Colors.redAccent.withOpacity(0.1),
                          visible: true),


                    ]),)

0 commentaires