如何将小部件放在颤动折线点上

时间:2021-05-11 10:15:02

标签: flutter google-maps dart

我正在将谷歌地图集成到 Flutter 应用程序中。我在应用程序中添加了多个标记。另外,我使用 flutter_polyline_points 在两个标记之间添加了方向。问题是我如何在折线点上放置一个小部件来显示我使用距离指标 API 计算的距离或估计的旅行时间。

谷歌地图

child: GoogleMap(
                  mapType: MapType.normal,
                  markers: Set<Marker>.of(markerData.values),
                  onMapCreated: _onMapCreated,
                  initialCameraPosition: CameraPosition(
                    target: _center,
                    zoom: 15.0,
                  ),
                  // zoomControlsEnabled: false,
                  mapToolbarEnabled: true,
                  myLocationButtonEnabled: true,
                  myLocationEnabled: true,
                  polylines: Set<Polyline>.of(polylines.values),
                ),

标记

  void initMarkers(markerDetails, markerId) async {
    final markerIdVal = markerId;
    final MarkerId markerIdData = MarkerId(markerIdVal);
    final Marker marker = Marker(
        markerId: markerIdData,
        position: LatLng(markerDetails["latitude"], markerDetails["longitude"]),
        icon: await BitmapDescriptor.fromAssetImage(
            ImageConfiguration(devicePixelRatio: 2.5),
            'assets/images/marker.png'),
        infoWindow:
            InfoWindow(title: markerDetails["title"], snippet: distanceToLocation),
        onTap: () {
          _handleMarkerTap(
              LatLng(markerDetails["latitude"], markerDetails["longitude"]));
        });
    setState(() {
      markerData[markerIdData] = marker;
    });
  }

折线点

//Get polyline
  void _getPolyline(latitude, longitude) async {
    List<LatLng> polylineCoordinates = [];

    PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
      "MY_API_KEY",
      PointLatLng(13.0323, 77.57),
      PointLatLng(latitude, 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);
  }

  //Add polylines to the map
  _addPolyLine(List<LatLng> polylineCoordinates) {
    PolylineId id = PolylineId("poly");
    Polyline polyline = Polyline(
      polylineId: id,
      color: Colors.deepOrange,
      points: polylineCoordinates,
      width: 3,
      patterns: [PatternItem.dash(15), PatternItem.gap(10)],
    );
    polylines[id] = polyline;
  }

This is what I'm trying to achieve

0 个答案:

没有答案