@uiw/react-baidu-map-circle

^{使用 我的应用 也是一种 支持 我的方式：}

Circle 圆
===


表示地图上的圆覆盖物。

``jsx
import { Circle, useCircle } from '@uiw/react-baidu-map';
// 或者单独安装使用
import Circle, { useCircle } from '@uiw/react-baidu-map-circle';
`

$3

`jsx mdx:preview
import React, { useState } from 'react';
import { Map, Circle, APILoader } from '@uiw/react-baidu-map';

const Example = () => {
const [visiable, setVisiable] = useState(true);
const [enableEditing, setEnableEditing] = useState(false);
const [strokeOpacity, setStrokeOpacity] = useState(0.9);
function circleRef(props) {
if (props && props.circle) {
console.log('circle:', props.circle, props.map, props.BMap);
}
}
return (
<>
setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}
setEnableEditing(!enableEditing)}>{enableEditing ? '取消编辑' : '编辑'}
setStrokeOpacity(0.7)}>透明度0.7
setStrokeOpacity(0.2)}>透明度0.2


);
}

const Demo = () => (


export default Demo;
`

$3

circle, setCircle

`jsx mdx:preview
import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { Map, Provider, APILoader, useMap, useCircle } from '@uiw/react-baidu-map';

const Example = () => {
const [enableEditing, setEnableEditing] = useState(false);
const [strokeOpacity, setStrokeOpacity] = useState(0.9);
const divElm = useRef(null);
const { setContainer, map } = useMap({
widget: ['GeolocationControl', 'NavigationControl']
});
const { circle } = useCircle({ map,
enableScrollWheelZoom: true, // 启用滚轮放大缩小，默认禁用
enableEditing, strokeOpacity,
center: { lng: 121.455228, lat: 31.240257 },
radius: 1000,
});
useCircle({ map,
strokeWeight: 1,
center: { lng: 121.490298, lat: 31.229388 },
radius: 1500,
});

useEffect(() => {
if (divElm.current) {
setContainer(divElm.current);
}
});

useEffect(() => {
if (map && circle) {
if (enableEditing) {
circle.setFillColor('red');
circle.enableEditing();
} else {
circle.setFillColor('transparent');
circle.disableEditing();
}
}
}, [enableEditing]);

useEffect(() => {
if (map && circle) {
circle.setStrokeOpacity(strokeOpacity);
}
}, [strokeOpacity]);

return (
<>
setEnableEditing(!enableEditing)}>{enableEditing ? '取消编辑' : '开启编辑'}
setStrokeOpacity(0.7)}>透明度0.7
setStrokeOpacity(0.2)}>透明度0.2