如何在 Google Maps Flutter 插件上添加折线? [英] How to add Polyline on Google Maps Flutter Plugin?

问题描述

我使用官方 Google Maps Flutter 插件来显示地图，它运行得非常好，但现在我想在地图中显示一条路线，所以我正在使用 这个包 为我提供路线我只需要添加 Polylines.

I'm using the official Google Maps Flutter plugin to show maps and it works perfectly well but now I want to show a route in the map so I'm using this package to provide me the route I only need to add the Polylines.

推荐答案

我用这个插件解决了同样的问题 google_maps_flutter: ^0.5.19

I had the same probelm solved by using this 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,

    );
}

这篇关于如何在 Google Maps Flutter 插件上添加折线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！