flutter 抖动:多段线显示直线

svmlkihl  于 2023-11-21  发布在  Flutter
关注(0)|答案(4)|浏览(145)

我实现了一个Flutter应用程序显示折线flutter google maps插件,但它只显示这两个点之间的直线,而不是显示实际的路线,我不太确定需要做什么。
这里我的添加标记函数

void addMarker() {
latlng.add(LatLng(5.973804, 80.429838));
allMarkers.add(Marker(
  markerId: MarkerId('busLoc'),
  draggable: true,
  onTap: () {
    print('Marker Tapped');
  },
  position: LatLng(5.973804, 80.429838),
));

_polyline.add(Polyline(
  color: Colors.blue,
  visible: true,
  points: latlng,
  polylineId: PolylineId("distance"),
));

字符串
这是我的断头台

GoogleMap(
    
    polylines: _polyline,
    markers: Set.from(allMarkers),
    initialCameraPosition:
        CameraPosition(target: LatLng(widget.la, widget.l0), zoom: 14),
    mapType: MapType.normal,
  ),


我会附上下面的截图以及

acruukt9

acruukt91#

要获取从A点到B点的路线,您需要使用google_maps_webservice flutter包中提供的Directions API,这是Google Maps Platform提供的路线信息服务
其中一个路由信息是overview_polyline,它保存路由的编码的XML表示。
您可以通过使用google_maps_webservice包向Directions API发送请求的函数来获取overview_polyline,如下所示:

import 'package:google_maps_webservice/directions.dart' as directions;

final _directions = new directions.GoogleMapsDirections(apiKey: "YOUR_API_KEY");

var overviewPolylines;

directions.DirectionsResponse dResponse = await _directions.directionsWithAddress(
     _originAddress, 
     _destinationAddress, 
);

if (dResponse.isOkay) {
  for (var r in dResponse.routes) {
    overviewPolylines = r.overviewPolyline.points
  }
}

字符串
然后,使用上面的示例代码从Directions API获取overview_polyline后,需要使用google_maps_util flutter包中的PolyUtil();方法对其进行解码,如下所示:

import 'package:google_maps_util/google_maps_util.dart';

PolyUtil myPoints = PolyUtil();
var pointArray = myPoints.decode(overviewPolylines);


解码后,您可以像这样将pointArray传递给polyline对象:

_polyline.add(Polyline(
 color: Colors.blue,
  visible: true,
  points: pointArray,
  polylineId: PolylineId("distance"),
));

ctrmrzij

ctrmrzij2#

它显示的是直线,因为你的图中只有两个点,所以预期的行为是从一个点到另一个点画一条线。

p5cysglq

p5cysglq3#

你必须使用谷歌方向API这里是一篇文章解释如何绘制两点之间的路线在Flutter。
https://medium.com/flutter-community/drawing-route-lines-on-google-maps-between-two-locations-in-flutter-4d351733ccbe

igsr9ssn

igsr9ssn4#


在flutterMap(flutter_map:^6.0.1)中,为了在两个点之间绘制直线,您应该在PolylineLayer中绘制Polyline,如下代码所示
这是我的代码

FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        keepAlive: true,
        initialCameraFit: CameraFit.coordinates(
          coordinates:
              widget.markers?.map((e) => LatLng(e.point.latitude, e.point.longitude)).toList() ?? [widget.center!],
        ),
        initialCenter: widget.center ?? const LatLng(-37.750928, 145.024253),
        interactionOptions: InteractionOptions(
          flags: widget.interactiveFlag ?? InteractiveFlag.all,
        ),
        onPositionChanged: (position, hasGesture) {
          if (widget.onPositionChanged != null) {
            widget.onPositionChanged?.call(position);
          }
        },
      ),
      children: [
        TileLayer(
          urlTemplate: 'YOUR_URL_TILE',
        ),
        MarkerLayer(markers: widget.markers ?? []),
        PolylineLayer(
          polylines: [
            Polyline(
                points: widget.markers?.map((e) => LatLng(e.point.latitude, e.point.longitude)).toList() ?? [],
                color: getPrimaryColor,
                isDotted: true,
                strokeWidth: 3)
          ],
        ),
      ],
    )

字符串

相关问题