鼠标绘制工具
截屏2022-03-01 下午4.20.35.png
引入脚本
首先，需要在你的index.html模板页面头部加载百度地图JavaScript API代码，密钥可去百度地图开放平台官网申请
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
引入MapGl库
npm install react-bmapgl
DrawingManager工具类代码
<Map
style={{ height: 'calc(100vh - 38px - 48px - 64px)' }}
ref={(r) => {
mapRef.current = r;
}}
center={{ lng: 116.402544, lat: 39.928216 }}
zoom={13}
>
<DrawingManager
style={{
top: 130,
left: 32,
position: 'absolute',
width: 360,
zIndex: 100,
}}
enableLimit
enableCalculate
onOverlaycomplete={(e, info) => {
console.log(e, info);
}}
map={mapRef.current}
/>
</Map>
