嘿，你遇到的这个问题其实是Web墨卡托投影（Leaflet默认投影）在高纬度地区的失真特性导致的！直接用余弦/正弦函数基于经纬度计算坐标的方式，相当于把球面的经纬度当成平面坐标处理，但地球是球体，越靠近极点，经度线之间的实际距离就越短，这就使得你计算出来的点在地图上被拉伸成了椭圆。

下面给你两种靠谱的解决方案：

方案1：基于地图像素坐标计算（视觉上的圆形） #

这种方法先把经纬度转换成地图容器的像素坐标，在平面上用三角函数计算圆周点，再转换回经纬度，能保证在任何纬度下，Marker都呈现视觉上的圆形：

import { useMap, Marker } from 'react-leaflet';
import { useState, useEffect } from 'react';

function CircularVisualMarkers({ center, radius = 100 }) {
  const map = useMap();
  const [markerPositions, setMarkerPositions] = useState([]);

  useEffect(() => {
    if (!map) return;

    // 把中心点转成地图像素坐标
    const centerPixel = map.latLngToPoint(center);
    const positions = [];
    const pointCount = 36; // 控制圆形的平滑度

    for (let i = 0; i < pointCount; i++) {
      const angle = (i / pointCount) * 2 * Math.PI;
      // 在像素平面上计算圆周点
      const pixelX = centerPixel.x + radius * Math.cos(angle);
      const pixelY = centerPixel.y + radius * Math.sin(angle);
      // 转回经纬度
      const latLng = map.pointToLatLng([pixelX, pixelY]);
      positions.push(latLng);
    }

    setMarkerPositions(positions);
  }, [map, center, radius]);

  return (
    <>
      {markerPositions.map((pos, idx) => (
        <Marker key={idx} position={pos} />
      ))}
    </>
  );
}

方案2：基于实际距离的圆形（用Leaflet内置Circle对象） #

如果你的需求是按实际地理距离（比如米）绘制圆形，直接借助Leaflet的Circle组件来获取圆周经纬度是最省心的——Leaflet已经帮你处理了不同纬度的投影校正：

import { Circle, Marker } from 'react-leaflet';
import { useState } from 'react';

function CircularDistanceMarkers({ center, radiusInMeters = 5000 }) {
  const [markerPositions, setMarkerPositions] = useState([]);

  // 当Circle添加到地图时，获取它的圆周点
  const handleCircleReady = (e) => {
    const circle = e.target;
    // getLatLngs()返回的是多边形的坐标数组，取第一个元素就是圆周点集合
    const circleLatLngs = circle.getLatLngs()[0];
    setMarkerPositions(circleLatLngs);
  };

  return (
    <>
      {/* 隐藏原始Circle，只用来计算坐标 */}
      <Circle
        center={center}
        radius={radiusInMeters}
        onAdd={handleCircleReady}
        opacity={0}
        fillOpacity={0}
      />
      {markerPositions.map((pos, idx) => (
        <Marker key={idx} position={pos} />
      ))}
    </>
  );
}

为什么原来的方法会失效？ #

你之前的计算逻辑是直接对经纬度做加减：

const newLat = center.lat + Math.sin(angle) * step;
const newLng = center.lng + Math.cos(angle) * step;

但经度的每一度对应的实际距离会随纬度变化，公式是经度距离 = 111km × cos(纬度)，越靠近极点，cos(纬度)的值越小，经度方向的实际距离就越短。这就导致你在经度方向加的step对应的实际距离比纬度方向小，最终画出的图形被拉成椭圆。而上面两种方案都通过投影转换或者Leaflet内置的地理计算，自动校正了这个差异。

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