import { RequireScript, requireScript } from '@uiw/react-baidu-map';
// 或者单独安装使用
import RequireScript, { requireScript } from '@uiw/react-baidu-map-require-script';

import React from 'react';
import { useRef } from 'react';
import { Map, APILoader, RequireScript } from '@uiw/react-baidu-map';

const Example = () => {
  const myDis = useRef();
  const openHandle = () => {
    myDis.current.open();
  }
  const closeHandle = () => {
    myDis.current.close();
  }
  return (
    <>
      <div>
        <input type="button" value="开启测距" onClick={openHandle} />
        <input type="button" value="关闭测距" onClick={closeHandle} />
      </div>
      <Map mapClick={false} style={{ height: 350 }}>
          {({ map }) => {
            myDis.current = new BMapGLLib.DistanceTool(map);
            // 监听测距过程中的鼠标事件
            myDis.current.addEventListener('drawend', function(e) {
              console.group("drawend");
              console.log(e.points);
              console.log(e.overlays);
              console.log(e.distance);
              console.groupEnd();
            });
            myDis.current.addEventListener("addpoint", function(e) {
              console.group("addpoint");
              console.log(e.point);
              console.log(e.pixel);
              console.log(e.index);
              console.log(e.distance);
              console.groupEnd();
            });
            myDis.current.addEventListener("removepolyline", function(e) {
              console.group("removepolyline");
              console.log(e);
              console.groupEnd();
            });
          }}
      </Map>
    </>
  );
};

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader type="webgl" akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <RequireScript src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js">
        <Example />
      </RequireScript>
    </APILoader>
  </div>
);

export default Demo;