google-maps - 在颤振中实现实时跟踪的最简单方法是什么？

问题描述

我正在开发一个可以检测附近电动汽车充电站的应用程序。我添加了充电站标记，指示给定半径内的充电站。我需要在应用程序中实时跟踪车辆。我是颤振的初学者，所以我正在寻找易于实现的代码。我在三个文件中编写了代码，它们是：

主要.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:sample_app/gmap.dart';
import 'package:sample_app/stations.dart';


void main()
{
  runApp(myApp());
}
    
    class myApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "Homepage",
          theme: ThemeData(
            primarySwatch: Colors.indigo,
          ),
          home: MyHomePage(),
        );
      }
    }
    
    
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
  }
  
  class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image.asset('assets/images/img1.jpg',
            fit: BoxFit.cover,
            color: Colors.black54,
            colorBlendMode: BlendMode.darken,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Stack(
                 children: <Widget>[
                    Container(
                      height: 200.0,
                      width: 450.0,
                      decoration: BoxDecoration(
                          color: Color(0xFFE8EAF6).withOpacity(0.3),
                          
                        
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            "Find charging stations for your Electric Vehicle at the touch of a button",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 24.0,
                              fontWeight: FontWeight.bold,
                              
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                               RaisedButton(
                                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                                
                                 onPressed: () => Navigator.push(
                                     context,
                                     MaterialPageRoute(builder: (context) => GMap()),
                                 )
                                   
                                 , 
                                 color: Colors.indigo,

                                 child: Text(
                                   "Find!",
                                   style: TextStyle(
                                     fontSize: 24.0,
                                     color: Colors.white,

                                   ),
                                 )
                               )
                            ]
                          )
                        ]
                      ),
                    )

                 ]

                )
              ]
            )
          ]
        ),
      );
    }
  }

gmap.dart

import 'dart:collection';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geolocator/geolocator.dart';
import 'package:sample_app/stations.dart';
import 'package:location/location.dart';


class GMap extends StatefulWidget {
  GMap({Key key}) : super(key: key);
  @override
  _GMapState createState() => _GMapState();
}

class _GMapState extends State<GMap> {
  
  bool mapToggle = false;
  var currentLocation;
  Set<Circle> _circles = HashSet<Circle>();

GoogleMapController mapController;

List<Marker> allMarkers= [];
PageController _pageController;
BitmapDescriptor _markerIcon;
BitmapDescriptor _currlocIcon;
int prevPage;
List<LatLng> allLatLng= [];
Location _locationTracker= Location();



@override
  void initState(){
    super.initState();
    _setMarkerIcon();
    _setcurrlocIcon();
   Geolocator().getCurrentPosition().then((currloc) {
      setState(() {
        currentLocation= currloc;
         _setCircles();
        mapToggle= true;
        chargingStations.forEach((element) {
          Geolocator()
          .distanceBetween(currentLocation.latitude, currentLocation.longitude,
           element.locationCoords.latitude, element.locationCoords.longitude).then((calDist){
             if(calDist/1000 < 5){
               allMarkers.add(Marker(
      markerId: MarkerId(element.stationName),
      draggable: false,
      position: element.locationCoords,
      infoWindow: InfoWindow(title: element.description),
    icon: _markerIcon
    ));
             }
           });
    allMarkers.add(Marker(
      markerId: MarkerId('23'),
      position: LatLng(currentLocation.latitude, currentLocation.longitude),
      icon: _currlocIcon
    ));
  });
      });
  
    });
  }

void _setCircles() {
    _circles.add(
      Circle(
          circleId: CircleId("0"),
          center: LatLng(currentLocation.latitude, currentLocation.longitude),
          radius: 1000,
          strokeWidth: 2,
          fillColor: Color.fromRGBO(102, 51, 153, .5)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Map"),

      ),
      body: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height - 80.0,
                width: double.infinity,
                child: mapToggle
                ? GoogleMap(
                  zoomGesturesEnabled: true,
                  onMapCreated: onMapCreated,
                  initialCameraPosition: CameraPosition(target: LatLng(currentLocation.latitude, currentLocation.longitude),
                  zoom: 12.0,
                  
                  ),
                  markers: Set.from(allMarkers),
                  circles: _circles,
                  )
                : Center(child: 
                Text("Loading...Please Wait",
                style: TextStyle(
                  fontSize: 20.0
                ),)
                )
              ),
            
            
            ],
          )
        ],
      )
    );
  }

   void onMapCreated(controller) {
    setState(() {
      mapController = controller;
    });
  }

moveCamera(){
  mapController.animateCamera(CameraUpdate.newCameraPosition(
    CameraPosition(
      target: chargingStations[_pageController.page.toInt()].locationCoords,
      zoom: 14.0,
      bearing: 45.0,
      tilt: 45.0
    )
  ));
}

void _setMarkerIcon() async {
    _markerIcon =
        await BitmapDescriptor.fromAssetImage(ImageConfiguration(), 'assets/images/icon.png');

}

void _setcurrlocIcon() async{
  _currlocIcon= await BitmapDescriptor.fromAssetImage(ImageConfiguration(), 'assets/images/taxi.png');
}



}

车站.dart

import 'package:google_maps_flutter/google_maps_flutter.dart';

class Station{
  String stationName;
  String description;
  String thumbNail;
  LatLng locationCoords;

  Station({
    this.stationName,
    this.locationCoords,
    this.description,
    this.thumbNail
  });
}

final List<Station> chargingStations= [
  Station(
    stationName: 'Mahindra Logistics Ltd',
    locationCoords: LatLng(12.839266, 77.685982),
    description: 'Mahindra Logistics Ltd',
    thumbNail: 'https://lh5.googleusercontent.com/p/AF1QipNNzoa4RVMeOisc0vQ5m3Z7aKet5353lu0Aah0a=w90-h90-n-k-no'
  ),
  Station(
    stationName: 'Mahindra Reva Solar Charging Station',
    locationCoords: LatLng(12.810525, 77.662289),
    description: 'Mahindra Reva Solar Charging Station',
    thumbNail: 'https://lh5.googleusercontent.com/p/AF1QipOfv3DSTkjsgvwCsUe_flDr4DBXneEVR1hWQCvR=w90-h90-n-k-no'
  ),
  Station(
    stationName: 'Fast charging by Mahindra Electric-2',
    locationCoords: LatLng(12.973561, 77.728046),
    description: 'Fast charging by Mahindra Electric-2',
    thumbNail: 'https://lh5.googleusercontent.com/p/AF1QipPGoxAP7eK6C44vSIx4SdhXdp78qiZz2qKp8-o1=w90-h90-n-k-no'
  ),
  Station(
    stationName: 'Electric Vehicle Charging Station',
    locationCoords: LatLng(12.900340, 77.648576),
    description: 'Electric Vehicle Charging Station',
    thumbNail: 'https://lh5.googleusercontent.com/p/AF1QipNhygtMc1wNzN4n6txZLzIhgJ-QZ044R4axyFZX=w90-h90-n-k-no'
  
  ),
  Station(
    stationName: 'Mahindra Electric Fast Charger',
    locationCoords: LatLng(12.966276, 77.598890),
    description: 'Mahindra Electric Fast Charger',
    thumbNail: 'https://lh5.googleusercontent.com/p/AF1QipOMNvnrTlesBJwUcVVFBqVF-KnMVlJMi7_uU6lZ=w90-h90-n-k-no'
  )
];

标签： google-mapsflutterdart

google-maps - 在颤振中实现实时跟踪的最简单方法是什么？

问题描述

解决方案

推荐阅读