web-dev-qa-db-fra.com

Comment ajouter Polyline sur Google Maps Flutter Plugin?

J'utilise l'officiel plugin Google Maps Flutter pour afficher les cartes et cela fonctionne parfaitement bien mais maintenant je veux montrer un itinéraire sur la carte, donc j'utilise ce package pour me fournir l'itinéraire, il me suffit d'ajouter les Polylignes .

dartflutter
7
braulio.cassule

J'ai eu le même problème résolu en utilisant ce plugin google_maps_flutter: ^ 0.5.19

import 'package:google_maps_flutter/google_maps_flutter.Dart';

static const LatLng _center = const LatLng(33.738045, 73.084488);
final Set<Marker> _markers = {};
final Set<Polyline>_polyline={};

//add your lat and lng where you wants to draw polyline
LatLng _lastMapPosition = _center;
List<LatLng> latlng = List();
LatLng _new = LatLng(33.738045, 73.084488);
LatLng _news = LatLng(33.567997728, 72.635997456);

latlng.add(_new);
latlng.add(_news);

//call this method on button click that will draw a polyline and markers

void _onAddMarkerButtonPressed() {
    getDistanceTime();
    setState(() {
        _markers.add(Marker(
            // This marker id can be anything that uniquely identifies each marker.
            markerId: MarkerId(_lastMapPosition.toString()),
            //_lastMapPosition is any coordinate which should be your default 
            //position when map opens up
            position: _lastMapPosition,
            infoWindow: InfoWindow(
                title: 'Really cool place',
                snippet: '5 Star Rating',
            ),
            icon: BitmapDescriptor.defaultMarker,

        ));
        _polyline.add(Polyline(
            polylineId: PolylineId(_lastMapPosition.toString()),
            visible: true,
            //latlng is List<LatLng>
            points: latlng,
            color: Colors.blue,
        ));
    });

    //in your build widget method
    GoogleMap(
    //that needs a list<Polyline>
        polylines:_polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        myLocationEnabled:true,
        onCameraMove: _onCameraMove,
        initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
        ),

        mapType: MapType.normal,

    );
}
5
Jawad

Polyline n'est actuellement pas disponible (2019-01-27) dans le plugin officiel Google Maps Flutter . Cependant, deux demandes d'extraction ont ajouté cette fonctionnalité:

La requête d'extraction 1121 contient un exemple de code sur la façon d'utiliser la fonctionnalité Polyligne.

EDIT: Ajout d'informations sur la façon d'utiliser la fonctionnalité:

Attendez que la branche 1121 soit fusionnée (si c'est le cas) dans la ligne de base ou clonez la fourche repo . Une fois cloné

Copiez le dossier packages/google_maps_flutter au même niveau que votre application flutter par exemple:

- workspace
 |_myflutterapp
   |_lib
   |_Android
   |_ios
   |_pubspec.yaml
 |_google_maps_flutter

Modifiez ensuite vos dépendances pour pointer vers cette version et non la version officielle, c'est-à-dire dans votre fichier pubspec.yaml, changez-la en:

dev_dependencies:
  flutter_test:
    sdk: flutter

  google_maps_flutter:
    path: ../google_maps_flutter

Suivez ensuite les instructions sur Google Flutter bibliothèque

Un exemple est inclus dans le package google_maps_futter qui montre exactement comment utiliser les polylignes et les taps.

2
Jason

Google Maps pour Flutter prend déjà en charge les polylignes dans la version officielle 0.5.6 https://pub.dartlang.org/packages/google_maps_flutter#056

2
Álvaro

Il s'agit d'une réponse élargie à la réponse de Jawad. J'ai utilisé le plugin google maps officiel

google_maps_flutter 0.5.19 + 2

Le code de travail complet est donné ci-dessous.

import 'package:flutter/material.Dart';
import 'package:google_maps_flutter/google_maps_flutter.Dart';

class TestMapPolyline extends StatefulWidget {
  @override
  _TestMapPolylineState createState() => _TestMapPolylineState();
}

class _TestMapPolylineState extends State<TestMapPolyline> {
  final Set<Marker> _markers = {};
  final Set<Polyline> _polyline = {};

  GoogleMapController controller;

  List<LatLng> latlngSegment1 = List();
  List<LatLng> latlngSegment2 = List();
  static LatLng _lat1 = LatLng(13.035606, 77.562381);
  static LatLng _lat2 = LatLng(13.070632, 77.693071);
  static LatLng _lat3 = LatLng(12.970387, 77.693621);
  static LatLng _lat4 = LatLng(12.858433, 77.575691);
  static LatLng _lat5 = LatLng(12.948029, 77.472936);
  static LatLng _lat6 = LatLng(13.069280, 77.455844);
  LatLng _lastMapPosition = _lat1;

  @override
  void initState() {
    super.initState();
    //line segment 1
    latlngSegment1.add(_lat1);
    latlngSegment1.add(_lat2);
    latlngSegment1.add(_lat3);
    latlngSegment1.add(_lat4);

    //line segment 2
    latlngSegment2.add(_lat4);
    latlngSegment2.add(_lat5);
    latlngSegment2.add(_lat6);
    latlngSegment2.add(_lat1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        //that needs a list<Polyline>
        polylines: _polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _lastMapPosition,
          zoom: 11.0,
        ),
        mapType: MapType.normal,
      ),
    );
  }

  void _onMapCreated(GoogleMapController controllerParam) {
    setState(() {
      controller = controllerParam;
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId(_lastMapPosition.toString()),
        //_lastMapPosition is any coordinate which should be your default
        //position when map opens up
        position: _lastMapPosition,
        infoWindow: InfoWindow(
          title: 'Awesome Polyline tutorial',
          snippet: 'This is a snippet',
        ),
      ));

      _polyline.add(Polyline(
        polylineId: PolylineId('line1'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment1,
        width: 2,
        color: Colors.blue,
      ));

      //different sections of polyline can have different colors
      _polyline.add(Polyline(
        polylineId: PolylineId('line2'),
        visible: true,
        //latlng is List<LatLng>
        points: latlngSegment2,
        width: 2,
        color: Colors.red,
      ));
    });
  }
}
0
Yuvi

Vous pouvez utiliser cette lib

import 'package:map_view/map_view.Dart';
import 'package:map_view/polyline.Dart';
...
MapView mapView = MapView();
mapView.addPolyline(Polyline('my_polyline', [
  Location(45.52309483308097, -122.67339684069155),
  Location(45.52298442915803, -122.66339991241693),
]));
0
Andrey Turkovsky