uiwjs / react-baidu-map

基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。
https://uiwjs.github.io/react-baidu-map
MIT License
225 stars 22 forks source link

Uncaught ReferenceError: BMAP_DRAWING_POLYGON is not defined #320

Closed sunny-token closed 11 months ago

sunny-token commented 11 months ago

引入了 "@uiw/react-baidu-map-types": "^2.6.2", 在使用的地方报错了:Uncaught ReferenceError: BMAP_DRAWING_POLYGON is not defined 是需要引入什么文件吗?

const { drawingManager } = useDrawingManager({
        map,
        isOpen: false,
        enableDrawingTool: true,
        rectangleOptions: styleOptions,
        polygonOptions: styleOptions,
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, drawingModes: [
                BMAP_DRAWING_POLYGON,
                BMAP_DRAWING_RECTANGLE
            ]
        }
    })
jaywcjlove commented 11 months ago

@sunny-token 如果你可以提供可以重现的在线示例,我可以免费帮你排查一下错误,判断是什么问题,但是我预测大概率可能是类似下面的问题

sunny-token commented 11 months ago

@jaywcjlove 这是在线示例,麻烦帮忙排查一下哈,谢谢!

https://codesandbox.io/p/sandbox/xenodochial-mayer-nwkszf?file=%2Fsrc%2FDemo.js%3A34%2C15-34%2C35

jaywcjlove commented 11 months ago

@sunny-token 我查看示例并没有报错

image

并且我查看了 对象是存在的

image

所以你参考我搞的 高德地图 https://github.com/uiwjs/react-amap/issues/45#issuecomment-759174172 来解决你的问题

造成这个原因只有 3 种,

  1. 百度的 SDK 加载失败,对象 BMAP_DRAWING_POLYGON 没有挂在到全局对象
  2. 遇到过,有一种开发环境必须 window.BMAP_ANCHOR_TOP_LEFT 去使用
  3. 你在使用 <APILoader> (该组件用于加载 SDK)组件之前,使用了 BMAP_ANCHOR_TOP_LEFT

因为你的示例没有报错,我也无法找出问题,你可以提供可以重现的示例

sunny-token commented 11 months ago

@jaywcjlove 示例好像少点东西

drawingToolOptions: {
      anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
      offset: new BMap.Size(5, 5), // 偏离值
      drawingModes: [BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE],
    },

我已经更新了示例代码 代码示例

jaywcjlove commented 11 months ago

@sunny-token https://codesandbox.io/p/sandbox/lucid-joji-xp6q2t?file=%2Fsrc%2FDemo.js%3A38%2C16

这个就是我说的上面的第 2

sunny-token commented 11 months ago

@jaywcjlove 好的,谢谢! 问题解决了,需要使用挂载window下面的常量

drawingToolOptions: {
            anchor: window.BMAP_ANCHOR_TOP_RIGHT, drawingModes: [
                window.BMAP_DRAWING_POLYGON,
                window.BMAP_DRAWING_RECTANGLE
            ]
        }