如何在Google Maps Flutter中绘制用户位置到指定标记点的polyline路线

问题原因 #

你代码的核心问题是执行顺序逻辑错误，还有几个常见的配置遗漏：

• onMapCreated回调中你先执行了_getPolyline()，再执行locatePosition()获取用户位置，但_getPolyline()依赖还未初始化的currentPosition变量，必然触发late变量未初始化的报错
• 没有提前申请位置权限，Geolocator无法正常获取用户位置
• 未确认Google Maps相关API是否开启，API_KEY权限配置是否正确
• Polyline没有设置颜色，就算绘制成功也可能因为透明不可见

修复步骤 #

1. 调整执行顺序，确保位置获取完成后再绘制路线 #

把_getPolyline()挪到locatePosition()的最后，位置获取成功之后再执行，修改locatePosition方法：

void locatePosition() async {
  // 先申请位置权限，确认授权后再获取位置
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied || permission == LocationPermission.deniedForever) {
    permission = await Geolocator.requestPermission();
    if (permission != LocationPermission.whileInUse && permission != LocationPermission.always) {
      // 权限被拒绝可自行补充提示逻辑
      return;
    }
  }
  Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high);
  currentPosition = position;
  LatLng latlatposition = LatLng(position.latitude, position.longitude);
  CameraPosition cameraPosition =
      new CameraPosition(target: latlatposition, zoom: 16);
  newGoogleMapController
      .animateCamera(CameraUpdate.newCameraPosition(cameraPosition));
  // 位置获取成功后再调用绘制路线方法
  _getPolyline();
}

2. 修改onMapCreated回调，去掉提前调用的_getPolyline #

onMapCreated: (GoogleMapController controller) {
  _controllerGoogleMap.complete(controller);
  newGoogleMapController = controller;
  locatePosition();
  setState(() {});
}

3. 给Polyline添加可见的颜色 #

修改_addPolyLine方法里的Polyline配置：

Polyline polyline = Polyline(
  polylineId: id,
  points: polylineCoordinates,
  width: 8,
  // 增加颜色配置，可自行替换为其他颜色
  color: Colors.blueAccent,
);

4. 确认基础配置正确 #

• 检查Android的AndroidManifest.xml、iOS的Info.plist里已经正确添加了Google Maps的API_KEY配置
• 确认Google Cloud控制台里你的API_KEY已经开启了Maps SDK for Android、Maps SDK for iOS、Directions API三个服务
• 把_getPolyline里的"API_KEY"替换成你自己的真实API_KEY

内容的提问来源于stack exchange，提问作者Aziz