基于Flutter与flutter_map：如何将米制距离转换为像素？

要实现这个需求，核心是先把米制距离转换成对应的经纬度偏移量，再通过flutter_map的MapController将经纬度坐标转为屏幕像素坐标，最终算出像素半径。具体步骤如下：

• 第一步：初始化MapController
  确保你的flutter_map组件持有MapController实例，它是实现坐标转换的关键：

  final MapController mapController = MapController();
  

• 第二步：计算米数对应的经纬度偏移
  地球近似球体，纬度方向每度约对应111139米；经度方向的每度距离会随纬度变化，公式是111139 * cos(纬度弧度)。我们可以算出圆心向正北偏移指定米数后的经纬度：

  LatLng calculateOffset(LatLng center, double meters) {
    final latOffset = meters / 111139; // 纬度偏移量
    final lonOffset = meters / (111139 * cos(center.latitude * pi / 180));
    // 返回正北方向偏移后的点，用来计算像素差
    return LatLng(center.latitude + latOffset, center.longitude);
  }
  

• 第三步：转像素坐标并计算像素半径
  用MapController的latLngToScreenPoint方法，把圆心和偏移点转成像素坐标，两者的距离就是我们要的像素半径：

  double getPixelRadius(LatLng center, double radiusMeters) {
    final offsetPoint = calculateOffset(center, radiusMeters);
    final centerPixel = mapController.latLngToScreenPoint(center);
    final offsetPixel = mapController.latLngToScreenPoint(offsetPoint);
    return (offsetPixel - centerPixel).distance;
  }
  

• 第四步：绘制圆形
  用flutter_map自带的CircleLayer绘制圆形，传入计算好的像素半径即可：

  FlutterMap(
    mapController: mapController,
    options: MapOptions(
      center: const LatLng(31.2304, 121.4737), // 示例圆心（上海）
      zoom: 12,
      // 监听缩放事件，缩放时重新计算像素半径
      onMapEvent: (event) {
        if (event is MapEventZoom) {
          setState(() {}); // 触发UI更新，重新计算半径
        }
      },
    ),
    children: [
      TileLayer(
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: const ['a', 'b', 'c'],
      ),
      CircleLayer(
        circles: [
          CircleMarker(
            point: const LatLng(31.2304, 121.4737),
            radius: getPixelRadius(const LatLng(31.2304, 121.4737), 1000), // 1000米半径
            color: Colors.blue.withOpacity(0.2),
            borderColor: Colors.blue,
            borderStrokeWidth: 2,
          ),
        ],
      ),
    ],
  );
  

注意事项 #

• 这个计算是近似值，基于地球为球体的假设，大多数日常场景下精度足够；如果需要更高精度，可以考虑使用椭球体模型的计算方法。
• 地图缩放级别变化时，像素半径会跟着变，所以必须监听缩放事件，重新计算并更新UI。

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