使用网络图片作为google_maps_flutter标记失败，始终显示默认图标

你的代码核心问题是异步加载的时序冲突：initState里调用的getpicture()是异步操作，而onMapCreated往往会在图片加载完成前就执行，此时markerbitmap还是null，标记只能用默认图标。等图片加载完调用setState时，已经创建好的标记并没有被更新，所以始终显示默认图钉。

下面是两种可行的解决方法：

方法一：图片加载完成后自动刷新标记 #

修改图片加载逻辑，在图片加载完成后重新生成所有标记并更新状态：

var markerbitmap;

Future<void> getpicture() async {
  String imgurl = "http://domain/image.jpg";
  try {
    // 改用HttpClient加载网络图片，比NetworkAssetBundle更稳定
    final httpClient = HttpClient();
    final request = await httpClient.getUrl(Uri.parse(imgurl));
    final response = await request.close();
    final bytes = await consolidateHttpClientResponseBytes(response);
    
    setState(() {
      markerbitmap = BitmapDescriptor.fromBytes(bytes);
      // 图片加载完成后刷新所有标记
      _refreshMarkers();
    });
  } catch (e) {
    print("图片加载失败: $e");
    // 加载失败时可保留默认图标或做其他降级处理
  }
}

// 新增统一生成标记的方法
void _refreshMarkers() {
  _markers.clear();
  LatLng latLng_1 = LatLng(startCoordinatesLat, startCoordinatesLng);
  LatLng latLng_2 = LatLng(endCoordinatesLat, endCoordinatesLng);
  
  _addMarker(
    latLng_1,
    "origin",
    markerbitmap ?? BitmapDescriptor.defaultMarker,
  );
  _addMarker(
    latLng_2,
    "destination",
    markerbitmap ?? BitmapDescriptor.defaultMarker,
  );
  _addMarker(
    LatLng(31.5096673920523, 74.37318230126559),
    "waypoint",
    markerbitmap ?? BitmapDescriptor.defaultMarker,
  );
}

@override
void initState() {
  super.initState(); // 必须调用父类方法，你原来的代码遗漏了这一步
  getpicture();
}

void _onMapCreated(GoogleMapController controller) {
  mapController = controller;
  // 地图创建时先加载默认标记，等图片加载完成后自动替换
  _refreshMarkers();
}

// _addMarker和GoogleMap组件代码保持不变

方法二：等待图片加载完成后再初始化标记 #

适合必须优先显示自定义标记的场景，会先加载图片再初始化地图标记：

var markerbitmap;

@override
void initState() {
  super.initState();
  // 先加载图片，再初始化地图标记
  _initMapResources();
}

Future<void> _initMapResources() async {
  await getpicture();
  // 如果地图已经创建，直接刷新标记
  if (mapController != null) {
    _refreshMarkers();
  }
}

Future<void> getpicture() async {
  String imgurl = "http://domain/image.jpg";
  final httpClient = HttpClient();
  final request = await httpClient.getUrl(Uri.parse(imgurl));
  final response = await request.close();
  final bytes = await consolidateHttpClientResponseBytes(response);
  
  setState(() {
    markerbitmap = BitmapDescriptor.fromBytes(bytes);
  });
}

// _refreshMarkers、_addMarker方法同方法一

额外注意事项 #

• 确保添加网络权限：Android在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET"/>；如果是HTTP链接，iOS需要在Info.plist中配置NSAppTransportSecurity例外。
• 图片尺寸不宜过大，建议提前压缩到合适大小（比如100x100以内），避免标记显示异常或加载缓慢。

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