折线颤振工作不正确

Question

我正在使用 Flutter，我想在我的谷歌地图中绘制折线。我的代码在 Android 版本中运行良好，但在 Chrome 中却不行。这是我的代码和结果：

使用 Chrome：

Version web image 1

Version web image 2

安卓系统：

Version Android

我使用Google Map:时的代码

    Stack(
           children: [
               Container(
                     height:
                        500,
                     width:
                        380,
                     color:
                       Colors.red,
                     child:
                        GoogleMap(
                          polylines:                                                     
                          _polylines,                                    
                          myLocationButtonEnabled:
                            true,                                        
                          zoomControlsEnabled:
                              true,                                     
                         initialCameraPosition:                                                  
                           _initialCameraPosition,
                         markers:
                           _markers,
                         onMapCreated:
                         (GoogleMapController controller) {
                  _googleMapController = controller;
      },
     ),
    )
  ]),

我这样使用折线：

 PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
  googleAPIKey,
   PointLatLng(44.85552543453359,-0.5484378447808893),
   PointLatLng(listlatitudeLocation[0],  listlongitudeLocation[0])
// PointLatLng(44.86301953775456, -0.550416465058058)
  );
print(
   'Result Status  ${result.status}');
  if (result.status == 'OK') {
 result.points.forEach((PointLatLng point) {
                           polylineCoordinates.add(LatLng(
                                            point.latitude,
                                             point.longitude));
                                             });
 _polylines.add(Polyline(
   polylineId:                                                            
 PolylineId('Polyline_Etape_1'),
  width: 5,
color: Colors.blue,
 points:polylineCoordinates,
    ));
 }

颤振医生-v：

[✓] Flutter (Channel master, 2.6.0-12.0.pre.381, on Ubuntu 20.04.2 LTS 5.11.0-38-generic, locale en_US.UTF-8)
   • Flutter version 2.6.0-12.0.pre.381 at /home/hoxuanvinh1999/snap/flutter/common/flutter
   • Upstream repository https://github.com/flutter/flutter.git
   • Framework revision ef634b39a5 (8 days ago), 2021-10-18 15:10:33 -0700
   • Engine revision faa45f497f
   • Dart version 2.15.0 (build 2.15.0-226.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
   • Android SDK at /home/hoxuanvinh1999/Android/Sdk
   • Platform android-31, build-tools 31.0.0
   • Java binary at: /opt/android-studio-2020.3.1/android-studio/jre/bin/java
   • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
   • All Android licenses accepted.

[✓] Chrome - develop for the web
   • CHROME_EXECUTABLE = /home/hoxuanvinh1999/unsafe_chrome/google-chrome-unsafe.sh

[✓] Linux toolchain - develop for Linux desktop
   • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
   • cmake version 3.10.2
   • ninja version 1.8.2
   • pkg-config version 0.29.1

[✓] Android Studio (version 2020.3)
   • Android Studio at /opt/android-studio-2020.3.1/android-studio
   • Flutter plugin version 60.1.2
   • Dart plugin version 203.8292
   • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] Android Studio
   • Android Studio at /opt/android-studio
   • Flutter plugin can be installed from:
     ???? https://plugins.jetbrains.com/plugin/9212-flutter
   • Dart plugin can be installed from:
     ???? https://plugins.jetbrains.com/plugin/6351-dart
   • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.61.2)
   • VS Code at /usr/share/code
   • Flutter extension version 3.27.0

[✓] Connected device (2 available)
   • Linux (desktop) • linux  • linux-x64      • Ubuntu 20.04.2 LTS 5.11.0-38-generic
   • Chrome (web)    • chrome • web-javascript • Google Chrome 93.0.4577.63

非常感谢！

Answer 1

不要使用外部包，对我来说，我使用带有以下代码的默认谷歌地图包

import 'package:google_maps_flutter/google_maps_flutter.dart';

static const LatLng _center = const LatLng(33.738045, 73.084488);
final Set<Marker> _markers = {};
final Set<Polyline>_polyline={};

//add your lat and lng where you wants to draw polyline
LatLng _lastMapPosition = _center;
List<LatLng> latlng = List();
LatLng _new = LatLng(33.738045, 73.084488);
LatLng _news = LatLng(33.567997728, 72.635997456);

latlng.add(_new);
latlng.add(_news);

//call this method on button click that will draw a polyline and markers

void _onAddMarkerButtonPressed() {
    getDistanceTime();
    setState(() {
        _markers.add(Marker(
            // This marker id can be anything that uniquely identifies each marker.
            markerId: MarkerId(_lastMapPosition.toString()),
            //_lastMapPosition is any coordinate which should be your default 
            //position when map opens up
            position: _lastMapPosition,
            infoWindow: InfoWindow(
                title: 'Really cool place',
                snippet: '5 Star Rating',
            ),
            icon: BitmapDescriptor.defaultMarker,

        ));
        _polyline.add(Polyline(
            polylineId: PolylineId(_lastMapPosition.toString()),
            visible: true,
            //latlng is List<LatLng>
            points: latlng,
            color: Colors.blue,
        ));
    });

    //in your build widget method
    GoogleMap(
    //that needs a list<Polyline>
        polylines:_polyline,
        markers: _markers,
        onMapCreated: _onMapCreated,
        myLocationEnabled:true,
        onCameraMove: _onCameraMove,
        initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
        ),

        mapType: MapType.normal,

    );
}