пропадали кружки при клике

src/pages/workouts/components/WorkoutItem.vue

@@ -28,16 +28,17 @@
         <yandex-map-listener
           :settings="{
             onClick: (_: any, e: any) => {
-              const xIndex = coordWithIndex.get(
+              const xIndex = findNearestTrackIndex(
-                getKey(e.coordinates[0], e.coordinates[1]),
+                e.coordinates[0],
+                e.coordinates[1],
               );
-              if (mapX.length >= 2 || xIndex == undefined) {
+              if (mapX.length >= 2 || xIndex < 0) {
                 mapX = [];
                 clickCoordinates = [];
                 group.redrawAll();
               }
-              if (xIndex !== undefined) {
+              if (xIndex >= 0) {
-                clickCoordinates.push(e.coordinates);
+                clickCoordinates.push(lineCoordinates[xIndex] as LngLat);
                 mapX.push(xIndex);
                 group.redrawAll();
               }
@@ -81,7 +82,7 @@
               ] as LngLat,
               onClick: (_: unknown, __: unknown) => openPhoto(photo),
             }"
-            position="bottom-center"
+            position="top-center left-center"
           >
             <div class="photo-single">1</div>
           </yandex-map-marker>
@@ -518,17 +519,30 @@ const group = new ChartGroup([]);
 const mapX = ref<Array<number>>([]);
 let currentCoordinates = ref<Array<number> | null>([]);
 let clickCoordinates = ref<LngLat[]>([]);
-let coordWithIndex: Map<string, number> = new Map();
 let showModalTitle = ref(false);
 const showModalLink = ref(false);
-const getKey = (x: number, y: number) => {
+const CLICK_TRACK_RADIUS_M = 40;
-  x = Math.round(x * 1000) / 1000;
+/**
-  y = Math.round(y * 1000) / 1000;
+ * Finds the nearest track point index within CLICK_TRACK_RADIUS_M (metres)
-  return `${x}-${y}`;
+ * of the clicked lng/lat using an equirectangular approximation. Returns -1
-};
+ * when the click is farther than the radius from every track point.
+ */
+const findNearestTrackIndex = (lng: number, lat: number): number => {
+  let bestIdx = -1;
+  let bestDist = Infinity;
   for (let i = 0; i < lineCoordinates.length; i++) {
-  coordWithIndex.set(getKey(lineCoordinates[i][0], lineCoordinates[i][1]), i);
+    const [pLng, pLat] = lineCoordinates[i];
+    const midLatRad = ((lat + pLat) / 2) * (Math.PI / 180);
+    const dx = (pLng - lng) * 111320 * Math.cos(midLatRad);
+    const dy = (pLat - lat) * 110540;
+    const dist = Math.hypot(dx, dy);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestIdx = i;
     }
+  }
+  return bestDist <= CLICK_TRACK_RADIUS_M ? bestIdx : -1;
+};
 ChartJS.register(
   Title,
   Tooltip,