Flutter Google Maps自定义带网络图片的Marker实现（新手向）

问题翻译 #

我是Flutter新手，想在Google Maps上添加自定义Marker，Marker内部的图标是网络图片。希望能有简单快速的实现方法，当前我的代码如下：

return Scaffold(
  appBar: AppBar(
    title: Text("Explore"),
  ),
  body: Container(
    child: GetBuilder<ExpoloreController>(
      builder: (controllerpage) => HandlingDataView(
        statusRequest: controllerpage.statusRequest,
        widget: controllerpage.kGooglePlex != null
            ? Container(
                width: double.infinity,
                height: double.infinity,
                child: GoogleMap(
                  myLocationButtonEnabled: true,
                  myLocationEnabled: true,
                  circles: controllerpage.circles,
                  markers: {
                    ...List.generate(
                      doctorsController.doctors.length,
                      (index) => Marker(
                        markerId: MarkerId(index.toString()),
                        position: LatLng(
                          double.tryParse(doctorsController.doctors[index]["latitude"]) ?? 33.31524,
                          double.tryParse(doctorsController.doctors[index]["longitude"]) ?? 44.3660667,
                        ),
                        infoWindow: InfoWindow(
                          title: doctorsController.doctors[index]["name"],
                        ),
                        icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
                        onTap: () {},
                      ),
                    ),
                  },
                  mapType: MapType.normal,
                  initialCameraPosition: controllerpage.kGooglePlex!,
                  onMapCreated: (GoogleMapController controllermap) {
                    controllerpage.completercontroller!.complete(controllermap);
                  },
                ),
              )
            : Container(),
      ),
    ),
  ),
);

针对你的需求，最快的方式是利用Flutter Google Maps提供的BitmapDescriptor.fromNetworkImage方法，直接将网络图片转换为Marker图标。下面分步骤修改你的代码：

步骤1：在控制器中添加图标加载方法 #

在doctorsController或ExpoloreController里，添加异步方法处理网络图片到Marker图标的转换：

import 'package:google_maps_flutter/google_maps_flutter.dart';

Future<BitmapDescriptor> getNetworkMarkerIcon(String imageUrl, {Size size = const Size(40, 40)}) async {
  try {
    return await BitmapDescriptor.fromNetworkImage(
      imageUrl,
      size: size, // 自定义图标大小，按需调整
    );
  } catch (e) {
    // 加载失败时返回默认蓝色Marker
    return BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue);
  }
}

步骤2：预加载所有Marker图标 #

在获取医生数据的逻辑完成后，批量预加载所有医生对应的网络图标（以GetX控制器为例）：

// 在控制器中声明存储图标列表的变量
List<BitmapDescriptor> markerIcons = [];

// 加载图标的方法，放在获取医生数据之后调用
Future<void> loadMarkerIcons() async {
  markerIcons.clear();
  // 批量加载所有医生的图标
  markerIcons = await Future.wait(
    doctors.map((doctor) => getNetworkMarkerIcon(doctor["imageUrl"])).toList(),
  );
  update(); // 通知UI刷新
}

步骤3：修改Marker生成代码 #

回到UI代码，将默认图标替换为预加载好的网络图标：

markers: {
  ...List.generate(
    doctorsController.doctors.length,
    (index) => Marker(
      markerId: MarkerId(index.toString()),
      position: LatLng(
        double.tryParse(doctorsController.doctors[index]["latitude"]) ?? 33.31524,
        double.tryParse(doctorsController.doctors[index]["longitude"]) ?? 44.3660667,
      ),
      infoWindow: InfoWindow(
        title: doctorsController.doctors[index]["name"],
      ),
      // 替换为预加载的图标，加载失败用默认值
      icon: doctorsController.markerIcons[index] ?? BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
      onTap: () {},
    ),
  ),
},

注意事项 #

• 确保医生数据里包含imageUrl字段（对应网络图片地址），如果字段名不同，需修改代码中的键名
• 预加载能避免地图滑动时频繁加载图片的卡顿问题，是适合新手的稳定实现方案

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