不明确官方文档原因

DrawingManager 鼠标绘制工具条库 hook版本根据作者给的文档，并不能够正确的显示绘制的工具栏
const Example = () => {
  const styleOptions = {
    strokeColor: 'red', // 边线颜色。
    fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
    strokeWeight: 3, // 边线的宽度，以像素为单位。
    strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
    fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
    strokeStyle: 'solid', // 边线的样式，solid或dashed。
  };

const divElm = useRef(null);

const { setContainer, map } = useMap({
    zoom: 8,
    enableScrollWheelZoom: true,
    widget: ['GeolocationControl', 'NavigationControl'],
    
  });

const { drawingManager ,BMapLib} = useDrawingManager({
    map,
    isOpen: true, // 是否开启绘制模式
    enableDrawingTool: true, // 是否显示工具栏
    drawingToolOptions: {
      anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
      offset: new BMap.Size(5, 5), // 偏离值
    },
    circleOptions: styleOptions, // 圆的样式
    polylineOptions: styleOptions, // 线的样式
    polygonOptions: styleOptions, // 多边形的样式
    rectangleOptions: styleOptions, // 矩形的样式
  });

useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
     
    }
  }, [map]);

return (
    <>
      <div ref={divElm} style={{ height: '100%' }} />
    </>
  );
};

export default function () {
  return (
    <>
    
    <div style={{ width: '100%' ,height:'100%'}}>
      <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
        <Example />
      </APILoader>
    </div>
    </>
  );
}

uiw/react-baidu-map

内容风险标识

评论 (0)