颤振中的折线工具问题

时间:2020-11-09 07:26:58

标签: flutter google-maps polyline

我使用了以下代码->

const double CAMERA_ZOOM = 16;
const double CAMERA_TILT = 80;
const double CAMERA_BEARING = 30;
const LatLng SOURCE_LOCATION = LatLng(42.747932, -71.167889);
const LatLng DEST_LOCATION = LatLng(37.335685, -122.0605916);


class MapPage extends StatefulWidget {
   @override
State<StatefulWidget> createState() => MapPageState();
  }

 class MapPageState extends State<MapPage> {
  Completer<GoogleMapController> _controller = Completer();
  Set<Marker> _markers = Set<Marker>();

Set<Polyline> _polylines = Set<Polyline>();
List<LatLng> polylineCoordinates = [];
PolylinePoints polylinePoints;
String googleAPIKey = 'API_KEY';

BitmapDescriptor sourceIcon;
BitmapDescriptor destinationIcon;

 LocationData currentLocation;

//对目标位置的引用

 LocationData destinationLocation;
  Location location;
  double pinPillPosition = -100;
   PinInformation currentlySelectedPin = PinInformation(
  pinPath: '',
  avatarPath: '',
  location: LatLng(0, 0),
  locationName: '',
  labelColor: Colors.grey);
   PinInformation sourcePinInfo;
     PinInformation destinationPinInfo;

    @override
       void initState() {
         super.initState();

//创建位置实例

location = new Location();
polylinePoints = PolylinePoints();
location.onLocationChanged().listen((LocationData cLoc) {
 
  currentLocation = cLoc;
  updatePinOnMap();
  });
   setSourceAndDestinationIcons();

//设置初始位置

  setInitialLocation();
 }

  void setSourceAndDestinationIcons() async {
    BitmapDescriptor.fromAssetImage(
          ImageConfiguration(devicePixelRatio: 2.0), 'assets/driving_pin.png')
        .then((onValue) {
     sourceIcon = onValue;
    });

     BitmapDescriptor.fromAssetImage(ImageConfiguration(devicePixelRatio: 2.0),
            'assets/destination_map_marker.png')
        .then((onValue) {
      destinationIcon = onValue;
       });
      }

    void setInitialLocation() async {

        currentLocation = await location.getLocation();
           destinationLocation = LocationData.fromMap({
              "latitude": DEST_LOCATION.latitude,
             "longitude": DEST_LOCATION.longitude
         });
       }

          @override
      Widget build(BuildContext context) {
       CameraPosition initialCameraPosition = CameraPosition(
             zoom: CAMERA_ZOOM,
         tilt: CAMERA_TILT,
     bearing: CAMERA_BEARING,
    target: SOURCE_LOCATION);
   if (currentLocation != null) {
    initialCameraPosition = CameraPosition(
      target: LatLng(currentLocation.latitude, currentLocation.longitude),
      zoom: CAMERA_ZOOM,
      tilt: CAMERA_TILT,
      bearing: CAMERA_BEARING);
     }
      return Scaffold(
        body: Stack(
    children: <Widget>[
      GoogleMap(
          myLocationEnabled: true,
          compassEnabled: true,
          tiltGesturesEnabled: false,
          markers: _markers,
          polylines: _polylines,
          mapType: MapType.normal,
          initialCameraPosition: initialCameraPosition,
          onTap: (LatLng loc) {
            pinPillPosition = -100;
          },
          onMapCreated: (GoogleMapController controller) {
            controller.setMapStyle(Utils.mapStyles);
            _controller.complete(controller);
            // my map has completed being created;
            // i'm ready to show the pins on the map
            showPinsOnMap();
          }),
      MapPinPillComponent(
          pinPillPosition: pinPillPosition,
          currentlySelectedPin: currentlySelectedPin)
            ],
         ),
       );
   }

  void showPinsOnMap() {
 // get a LatLng for the source location
// from the LocationData currentLocation object
var pinPosition =
    LatLng(currentLocation.latitude, currentLocation.longitude);
// get a LatLng out of the LocationData object
var destPosition =
    LatLng(destinationLocation.latitude, destinationLocation.longitude);

sourcePinInfo = PinInformation(
    locationName: "Start Location",
    location: SOURCE_LOCATION,
    pinPath: "assets/driving_pin.png",
    avatarPath: "assets/friend1.jpg",
    labelColor: Colors.blueAccent);

destinationPinInfo = PinInformation(
    locationName: "End Location",
    location: DEST_LOCATION,
    pinPath: "assets/destination_map_marker.png",
    avatarPath: "assets/friend2.jpg",
    labelColor: Colors.purple);


  _markers.add(Marker(
    markerId: MarkerId('sourcePin'),
    position: pinPosition,
    onTap: () {
      setState(() {
        currentlySelectedPin = sourcePinInfo;
        pinPillPosition = 0;
      });
    },
    icon: sourceIcon));
// destination pin
_markers.add(Marker(
    markerId: MarkerId('destPin'),
    position: destPosition,
    onTap: () {
      setState(() {
        currentlySelectedPin = destinationPinInfo;
        pinPillPosition = 0;
        });
      },
      icon: destinationIcon));

      setPolylines();
    }

        void setPolylines() async {
          List<PointLatLng> result = await polylinePoints.getRouteBetweenCoordinates(
             googleAPIKey,
            currentLocation.latitude,
            currentLocation.longitude,
            destinationLocation.latitude,
            destinationLocation.longitude);

         if (result.isNotEmpty) {
         result.forEach((PointLatLng point) {
          polylineCoordinates.add(LatLng(point.latitude, point.longitude));
        });

       setState(() {
           _polylines.add(Polyline(
           width: 2, // set the width of the polylines
            polylineId: PolylineId("poly"),
            color: Color.fromARGB(255, 40, 122, 198),
            points: polylineCoordinates));
              });
          }
        }

   void updatePinOnMap() async {

    CameraPosition cPosition = CameraPosition(
    zoom: CAMERA_ZOOM,
    tilt: CAMERA_TILT,
    bearing: CAMERA_BEARING,
    target: LatLng(currentLocation.latitude, currentLocation.longitude),
   );
   final GoogleMapController controller = await _controller.future;

    setState(() {
        
    var pinPosition =
      LatLng(currentLocation.latitude, currentLocation.longitude);

       sourcePinInfo.location = pinPosition;


       _markers.removeWhere((m) => m.markerId.value == 'sourcePin');
         _markers.add(Marker(
      markerId: MarkerId('sourcePin'),
       onTap: () {
         setState(() {
           currentlySelectedPin = sourcePinInfo;
          pinPillPosition = 0;
              });
               },
             position: pinPosition, // updated position
            icon: sourceIcon));
       });
      }
          }

我只看到在位置改变时移动的图钉,但没有路径,只有在地图上移动的图钉的动画。您能否告诉我,当引脚在屏幕上移动时,为了绘制出屏幕上跟踪的路径,监视的重要部分是什么?

0 个答案:

没有答案