React-Leaflet / OpenStreetMap:检测标记是否在圆内

npm install react-leaflet leaflet

import React from 'react';
import { MapContainer, CircleMarker } from 'react-leaflet';

const Map = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
      <CircleMarker center={[51.505, -0.09]} radius={10} pathOptions={{ color: 'red' }} />
    </MapContainer>
  );
};

export default Map;

import React from 'react';
import { MapContainer, CircleMarker } from 'react-leaflet';

const Map = () => {
  const circleCenter = [51.505, -0.09]; // 圆心坐标
  const circleRadius = 1000; // 圆的半径，单位为米
  const markerPosition = [51.506, -0.085]; // 标记的位置坐标

  const isMarkerInsideCircle = () => {
    const circle = L.circle(circleCenter, { radius: circleRadius }); // 创建一个Leaflet的圆对象
    const marker = L.marker(markerPosition); // 创建一个Leaflet的标记对象

    return circle.getBounds().contains(marker.getLatLng()); // 判断标记是否在圆内
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
      <CircleMarker center={circleCenter} radius={circleRadius} pathOptions={{ color: 'red' }} />
      {isMarkerInsideCircle() ? '标记在圆内' : '标记不在圆内'}
    </MapContainer>
  );
};

export default Map;