给 new BMap.Marker 对象添加的 click 监听器报错 b.ma(...).Ub is not a function

[xyxc0673]

示例代码

const { setContainer, map } = useMap({
  enableScrollWheelZoom: true,
});
const marker = new BMap.Marker(
  { lat: 32.3360520521223, lng: 119.1827553809459 },
);
marker.setTitle(device.serialNumber);
marker.addEventListener('click', function onclick() {
  console.log('onClick', marker.getPosition());
  map.centerAndZoom(marker.getPosition(), 18);
});
marker.enableDragging();
map.addOverlay(marker);

在初始化完成，点击 marker 报错，但是移动后再次点击却没有问题。

VM1736:1 
        
       Uncaught TypeError: b.ma(...).Ub is not a function
    at HTMLSpanElement.eval (eval at m_ (getscript?v=3.0&ak=xfl48OtZTyuYT44Ocm1GsEO02feR5nPu&services=&t=20220328195528:1:79720), <anonymous>:1:1311)

[jaywcjlove]

@xyxc0673 示例请用 https://codesandbox.io/s/react-baidu-map-demo-forked-jmeiio 提供

[xyxc0673]

@jaywcjlove 示例代码 https://codesandbox.io/s/react-baidu-map-demo-forked-8cg0gy

[jaywcjlove]

@xyxc0673 我使用 useMarker，看上去没有报错，我不太清楚是什么原因报错的，你可以参考我的封装里面怎么写，找到原因可以告诉我

https://codesandbox.io/embed/uiwjs-react-baidu-map-issues-267-usemarker-7sd2cx?fontsize=14&hidenavigation=1&theme=dark

Example Code

import ReactDOM from "react-dom";
import { useRef, Fragment, useEffect } from "react";
import { Provider, APILoader, useMap, useMarker } from "@uiw/react-baidu-map";

const Example = () => {
  const divElm = useRef(null);
  const { setContainer, map } = useMap({
    widget: ["GeolocationControl", "NavigationControl"],
    zoom: 8
  });
  const { setType, marker } = useMarker({
    map,
    position: { lng: 121.444017, lat: 31.237787 }
  });
  useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
    }
  });
  useEffect(() => {
    if (marker) {
      console.log("marker::", marker);
      marker.addEventListener("click", () => {
        console.log("marker", marker);
      });
    }
  }, [marker]);
  return (
    <Fragment>
      <button onClick={() => setType("red2")}>设置 red2</button>
      <button onClick={() => setType("loc_blue")}>设置 loc_blue</button>
      <button
        onClick={() =>
          marker.setPosition(new BMap.Point(121.497197, 31.232847))
        }
      >
        设置坐标点
      </button>
      <button onClick={() => marker.setAnimation(2)}>设置动画</button>
      <button onClick={() => marker.setAnimation(null)}>取消动画</button>
      <div ref={divElm} style={{ height: "100%" }} />
    </Fragment>
  );
};

const Demo = () => (
  <div style={{ width: "100%", height: "300px" }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Provider>
        <Example />
      </Provider>
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, document.getElementById("container"));

[xyxc0673]

@jaywcjlove 如果我查出了原因的话和你说一下，不过我现在的需求是需要遍历添加 marker 以及获得 Map 的 ref 来调用方法，useMarker 的话，好像不太方便遍历，然后使用 Map + Marker 组件的话，通过 ref 的方式获取的 Map 的实例是有的，但是调用方法时没有反应。 示例代码：https://codesandbox.io/s/react-baidu-map-demo-forked-3itzw7