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

xyxc0673 commented 2 years ago

示例代码

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 commented 2 years ago

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

xyxc0673 commented 2 years ago

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

jaywcjlove commented 2 years ago

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

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

Example Code

```jsx 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 (

); }; const Demo = () => (

); ReactDOM.render(, document.getElementById("container")); ```

xyxc0673 commented 2 years ago

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

uiwjs / react-baidu-map

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