uiwjs / react-baidu-map

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

CurveLine & DrawingManager 在对话框下使用,会出现 BMap undefined #17

Closed amin168 closed 3 years ago

amin168 commented 4 years ago

由于 CurveLine & DrawingManager 依赖 BMap,而我的对话框时 show 出来后再才会执行下面的代码,这里有两个问题出现

问题1:CurveLine & DrawingManager依赖的BMap,没有加载,所以导致BMap undefined,我的解决方法,如下 image

问题2:由于 BMap 没有加载成功,所以 BMAP_ANCHOR_TOP_RIGHTnew BMap.Size(5, 5),都会是undefined,如下图。这个我暂时还没想到怎么解决

image

jaywcjlove commented 3 years ago

@amin168 提供完整示例

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

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Map />
    </APILoader>
  </div>
);

改变如下写法,APILoader,用于加载百度地图 SDK 依赖,加载完成,全局将会有 window.BMap 对象。

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

const Example = () => {
  return (
    <>
      <Map zoom={13} center={{ lng: 121.460977, lat: 31.227906 }} />
    </>
  );
}

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Example />
    </APILoader>
  </div>
);