【问题标题】:Use current location to draw poly lines to a destination and also to add markers on google maps with markers flutter使用当前位置将折线绘制到目的地,并在谷歌地图上添加标记,标记颤动
【发布时间】:2021-09-23 11:53:11
【问题描述】:

我有一个带有谷歌地图的应用程序,该应用程序获取我当前的位置,地图上有两个标记,标记的一个点和折线是从前一个屏幕传递的坐标。我希望折线的起点是我当前的位置。我还想将我当前的位置用作第一个标记。如果折线和标记会随着驾驶员的移动而改变位置,那就太好了。但这不是现在的优先事项。

到目前为止我做了什么: 我能够得到我当前的位置。 我能够从硬编码坐标绘制折线到目标位置(目标位置由前一个屏幕提供)

我想做什么: 使用我当前的位置作为我的折线的起点 使用我当前的位置添加标记 驱动程序移动时更新折线和标记。

这是我目前的代码。


class _MyAppState extends State<RoutePage> {
  late GoogleMapController mapController;
  // Starting point latitude
  // 5.6609595, -0.017155699999989338)
  double _originLatitude = 5.555700;
  // Starting point longitude
  double _originLongitude = -0.196300;
  // Destination latitude
  double? destLatitude;
  // Destination Longitude
  double? destLongitude;
  // Markers to show points on the map
  Map<MarkerId, Marker> markers = {};
  Map<PolylineId, Polyline> polylines = {};
  List<LatLng> polylineCoordinates = [];

  PolylinePoints polylinePoints = PolylinePoints();


  Completer<GoogleMapController> _controller = Completer();

  late Position currentPosition;

  var geoLocator = Geolocator();
  late Geolocator geolocatorTwo;
  var locationOptions = LocationOptions(accuracy: LocationAccuracy.bestForNavigation, distanceFilter: 4);

  Future<LatLng> getCurrentPositiion() async {
    Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.bestForNavigation);
    currentPosition = position;
    LatLng pos = LatLng(position.latitude, position.longitude);
    mapController.animateCamera((CameraUpdate.newLatLng(pos)));
    print('MyPosition');
    print(currentPosition);
    print(pos.longitude);
    print(pos.latitude);
    print(position.longitude);
    print(position.latitude);
    print(pos);
    return pos;
  }

  static const LatLng _center = const LatLng(45.521563, -122.677433);

  @override
  void initState() {

    /// add origin marker origin marker
    _addMarker(
      LatLng(_originLatitude, _originLongitude),
      "origin",
      BitmapDescriptor.defaultMarker,
    );

    // Add destination marker
    _addMarker(
      LatLng(double.parse(widget.vendors!.latitude), double.parse(widget.vendors!.longitude)),
      "destination",
      BitmapDescriptor.defaultMarkerWithHue(90),
    );
    _getPolyline();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        body: GoogleMap(
          padding: EdgeInsets.only(top: 135),
          myLocationButtonEnabled: true,
          myLocationEnabled: true,
          mapType: MapType.normal,
          initialCameraPosition: googlePlex,
          onMapCreated: (GoogleMapController controller){
            _controller.complete(controller);
            mapController=controller;
            getCurrentPositiion();
          },
          polylines: Set<Polyline>.of(polylines.values),
          markers: Set<Marker>.of(markers.values),
        ),
      ),
    );
  }


  // This method will add markers to the map based on the LatLng position
  _addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
    MarkerId markerId = MarkerId(id);
    Marker marker =
    Marker(markerId: markerId, icon: descriptor, position: position);
    markers[markerId] = marker;
  }

  _addPolyLine(List<LatLng> polylineCoordinates) {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
      polylineId: id,
      points: polylineCoordinates,
      width: 8,
    );
    polylines[id] = polyline;
    setState(() {});
  }

  void _getPolyline() async {
    List<LatLng> polylineCoordinates = [];

    print("In the Polyline");
    print(currentPosition);
    print(currentPosition.longitude);


    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      "APP KEY",
      PointLatLng(_originLatitude, _originLongitude),
      PointLatLng(double.parse(widget.vendors!.latitude), double.parse(widget.vendors!.longitude)),
      travelMode: TravelMode.driving,
    );
    if (result.points.isNotEmpty) {
      result.points.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    } else {
      print(result.errorMessage);
    }
    _addPolyLine(polylineCoordinates);
  }

  void getLocationUpdates(){
    var homeTabPositionStream = Geolocator.getPositionStream().listen((Position position) {
      currentPosition = position;
      LatLng pos = LatLng(position.latitude, position.longitude);
      mapController.animateCamera(CameraUpdate.newLatLng(pos));
    });
  }
}

我错过了什么,为什么我不能只使用currentPosition.latitudecurrentPosition.longitude

【问题讨论】:

  • 您解决了这个问题吗?如果没有,您是否收到任何错误消息?

标签: android flutter google-maps google-maps-markers google-polyline


【解决方案1】:

我尝试修改您的代码,使其使用您当前的位置作为折线的起点,并使用 latlng 作为原点标记。请查看随附的屏幕截图。

我的默认位置在 GooglePlex 中,我只是在它附近设置了目的地 latlng (dest_location)。您可以将其设置在您所在位置附近的某个位置。

另外,这个article 可能会有所帮助,所以请检查一下。 :)

const LatLng dest_location = LatLng(37.42796133580664, -122.085749655962);

class _TrackingState extends State<Tracking> {
  GoogleMapController mapController;

  // Markers to show points on the map
  Map<MarkerId, Marker> markers = {};
  Map<PolylineId, Polyline> polylines = {};
  List<LatLng> polylineCoordinates = [];

  PolylinePoints polylinePoints = PolylinePoints();

  Completer<GoogleMapController> _controller = Completer();
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  Position currentPosition;
  var geoLocator = Geolocator();
  var locationOptions = LocationOptions(
      accuracy: LocationAccuracy.bestForNavigation, distanceFilter: 4);

  void getCurrentPosition() async {
    currentPosition = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.bestForNavigation);
  }

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

  @override
  Widget build(BuildContext context) {
    CameraPosition initialCameraPosition = _kGooglePlex;
    if (currentPosition != null) {
      initialCameraPosition = CameraPosition(
          target: LatLng(currentPosition.latitude, currentPosition.longitude),
          zoom: 14.4746);
    }
    return MaterialApp(
      home: Scaffold(
        body: GoogleMap(
          padding: EdgeInsets.only(top: 135),
          myLocationButtonEnabled: true,
          myLocationEnabled: true,
          mapType: MapType.normal,
          initialCameraPosition: initialCameraPosition,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
            mapController = controller;
            _getPolyline();
          },
          polylines: Set<Polyline>.of(polylines.values),
          markers: Set<Marker>.of(markers.values),
        ),
      ),
    );
  }

  // This method will add markers to the map based on the LatLng position
  _addMarker(LatLng position, String id, BitmapDescriptor descriptor) {
    MarkerId markerId = MarkerId(id);
    Marker marker =
        Marker(markerId: markerId, icon: descriptor, position: position);
    markers[markerId] = marker;
  }

  _addPolyLine(List<LatLng> polylineCoordinates) {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
      polylineId: id,
      points: polylineCoordinates,
      width: 8,
    );
    polylines[id] = polyline;
    setState(() {});
  }

  void _getPolyline() async {
    /// add origin marker origin marker
    _addMarker(
      LatLng(currentPosition.latitude, currentPosition.longitude),
      "origin",
      BitmapDescriptor.defaultMarker,
    );

    // Add destination marker
    _addMarker(
      LatLng(dest_location.latitude, dest_location.longitude),
      "destination",
      BitmapDescriptor.defaultMarkerWithHue(90),
    );

    List<LatLng> polylineCoordinates = [];

    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      "API KEY",
      PointLatLng(currentPosition.latitude, currentPosition.longitude),
      PointLatLng(dest_location.latitude, dest_location.longitude),
      travelMode: TravelMode.walking,
    );
    if (result.points.isNotEmpty) {
      result.points.forEach((PointLatLng point) {
        polylineCoordinates.add(LatLng(point.latitude, point.longitude));
      });
    } else {
      print(result.errorMessage);
    }
    _addPolyLine(polylineCoordinates);
  }
}

【讨论】:

    猜你喜欢
    • 2020-10-23
    • 2013-09-03
    • 2022-01-10
    • 2022-11-02
    • 1970-01-01
    • 2019-03-07
    • 1970-01-01
    • 2016-03-07
    • 2019-06-29
    相关资源
    最近更新 更多