You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter谷歌地图Polyline在Android运行正常但Chrome端显示异常

我正在使用Flutter开发,需要在谷歌地图中绘制Polyline,相关代码在Android端运行正常,但在Chrome浏览器的Web端无法正常显示,以下是我的代码及运行结果:

Chrome端运行效果

Web端效果截图1
Web端效果截图2

Android端运行效果

Android端效果截图

谷歌地图调用代码

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;
        },
      ),
    )
  ]
),

Polyline绘制逻辑代码

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,
  ));
}

开发环境信息(flutter doctor -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

非常感谢大家的帮助!


内容的提问来源于stack exchange,提问作者HoXuanVinh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.28 17:45:04