withmap組件 傳入两组坐标，实现线形图，但是会报组件的错？

[KyrieZhangi]

index.js:1451 The above error occurred in the component:

at ExampleMap (http://localhost:3010/static/js/main.chunk.js:93809:3)
at http://localhost:3010/static/js/vendors~main.chunk.js:100504:5
at APILoader (http://localhost:3010/static/js/vendors~main.chunk.js:98607:5)
at div
at div
at div
at FindOrder (http://localhost:3010/static/js/main.chunk.js:93767:101)
at Route (http://localhost:3010/static/js/vendors~main.chunk.js:161231:29)
at Switch (http://localhost:3010/static/js/vendors~main.chunk.js:161433:29)
at Router (http://localhost:3010/static/js/vendors~main.chunk.js:160850:30)
at App (http://localhost:3010/static/js/main.chunk.js:38185:5)
at ConnectFunction (http://localhost:3010/static/js/vendors~main.chunk.js:299093:75)
at FormProvider (http://localhost:3010/static/js/vendors~main.chunk.js:212598:31)
at LocaleProvider (http://localhost:3010/static/js/vendors~main.chunk.js:123915:94)
at ProviderChildren (http://localhost:3010/static/js/vendors~main.chunk.js:116242:24)
at LocaleReceiver (http://localhost:3010/static/js/vendors~main.chunk.js:123786:94)
at ConfigProvider (http://localhost:3010/static/js/vendors~main.chunk.js:116350:13)
at Provider (http://localhost:3010/static/js/vendors~main.chunk.js:298804:20)
at DvaRoot

React will try to recreate this component tree from scratch using the error boundary you provided, App.

[KyrieZhangi]

if (this.props?.deliveryLatitude) { const { BMap, map, pickupLatitude, pickupLongitude, deliveryLatitude, deliveryLongitude } = this.props; // const { pickupLatitude, pickupLongitude, deliveryLatitude, deliveryLongitude } = data; // 启用滚轮放大缩小，默认禁用 map.enableScrollWheelZoom(); // 添加地图类型控件 map.addControl( new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }) ); const point = new BMap.Point(pickupLongitude, pickupLatitude); const point2 = new BMap.Point(deliveryLongitude, deliveryLatitude); const marker = new BMap.Marker(point); // 创建标注 const marker2 = new BMap.Marker(point2); // 创建标注 map.centerAndZoom(point, 22); map.centerAndZoom(point2, 22); // const polyline = new BMap.Polyline( // [ // new BMap.Point(pickupLongitude, pickupLatitude), // new BMap.Point(deliveryLongitude, deliveryLatitude) // ], // { // strokeColor: "red", // strokeWeight: 5, // strokeOpacity: 0.5 // } // ); // map.addOverlay(polyline); // 将标注添加到地图中 map.addOverlay(marker); map.addOverlay(marker2); marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画 marker2.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画

            // 添加自定义菜单
            const menu = new BMap.ContextMenu();
            const menuItem = [
                { text: "放大", callback: () => map.zoomIn() },
                { text: "缩小", callback: () => map.zoomOut() }
            ];
            for (let i = 0; i < menuItem.length; i++) {
                menu.addItem(new BMap.MenuItem(menuItem[i].text, menuItem[i].callback, 200));
            }
            map.addContextMenu(menu);
        }

[KyrieZhangi]

数据接到了但是地图没更新请问一下这个怎么解决

[jaywcjlove]

欢迎使用 https://playcode.io/1329264 或者 https://codesandbox.io/ 提供可重现错误的示例，谢谢！ @KyrieZhangi

[KyrieZhangi]

欢迎使用 https://playcode.io/1329264 或者 https://codesandbox.io/ 提供可重现错误的示例，谢谢！ @KyrieZhangi

https://playcode.io/1329527

[jaywcjlove]

@KyrieZhangi 要我帮你解决问题下面这些错误应该你自己处理掉吧

[KyrieZhangi]

@KyrieZhangi 要我帮你解决问题下面这些错误应该你自己处理掉吧

不好意思 我这儿网不好也有点小急 麻烦你现在看看 https://playcode.io/1329527

[KyrieZhangi]

@KyrieZhangi 要我帮你解决问题下面这些错误应该你自己处理掉吧

不好意思 我这儿网不好也有点小急 麻烦你现在看看 https://playcode.io/1329527

业务场景就是 通过search 获取 起始坐标点和最终左边点 生成线形 麻烦你帮忙看下是不是我写的有问题 谢谢！

[jaywcjlove]

你d的示例都在报错怎么帮助你 @KyrieZhangi

[KyrieZhangi]

你d的示例都在报错怎么帮助你 @KyrieZhangi

sorry 我这儿网一直刷不出来 我以为好了 但我现在已经搞好了 麻烦你帮忙看看

[KyrieZhangi]

[KyrieZhangi]

你d的示例都在报错怎么帮助你 @KyrieZhangi

sorry 我这儿网一直刷不出来 我以为好了 但我现在已经搞好了 麻烦你帮忙看看

@jaywcjlove

[jaywcjlove]

@KyrieZhangi 你的网络不好，用这个示例 https://codesandbox.io/embed/exciting-lewin-5ficm3?fontsize=14&hidenavigation=1&theme=dark 可能比较好调试，你的示例还有错误。

[KyrieZhangi]

@KyrieZhangi 你的网络不好，用这个示例 https://codesandbox.io/embed/exciting-lewin-5ficm3?fontsize=14&hidenavigation=1&theme=dark 可能比较好调试，你的示例还有错误。

@jaywcjlove 好了 现在两个错误都解决完了 第二个我网不太好不知道怎么样 第一个已经没错误了

[jaywcjlove]

我看了你的代码，指出你写代码的几个问题，可能是它们引发的问题：

1. 在组件 <APILoader /> 调用的时候直接 是用 BMap 对象

const Example = () => {
  // .... 在这里写地图逻辑，如果没有 BMap 对象，此组件不会被执行
  //  所以它一定有 BMap
}

const Demo = () => {
  // 这里直接调用 BMap 对象会报错
  return (
    <div style={{ width: '100%' }}>
      <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
        <Example />
      </APILoader>
    </div>
  );
}

<APILoader> 组件用于加载百度地图 SDK，没有加载完成，全局没有挂在 BMap 对象，可能报错

2. 存在组件套组件的陷阱

组件可以呈现其他组件，但您绝不能嵌套它们的定义：

export default function Gallery() {
  // 🔴 永远不要在另一个组件中定义一个组件！
  function Profile() {
    // ...
  }
  // ...
}

上面的代码片段非常慢并导致错误。 相反，定义 顶层的每个组件：

export default function Gallery() {
  // ...
}

// ✅ 在顶层声明组件
function Profile() {
  // ...
}

你可以整理一下你的代码，再去看看你的错误是否存在，

如果错误还存在，我再帮你排查一下，在再帮你调试的时候，最好给我一个简单可以重现的示例，帮助你快速定位错误问题 @KyrieZhangi

[KyrieZhangi]

我看了你的代码，指出你写代码的几个问题，可能是它们引发的问题：

1. 在组件 <APILoader /> 调用的时候直接 是用 BMap 对象

const Example = () => {
  // .... 在这里写地图逻辑，如果没有 BMap 对象，此组件不会被执行
  //  所以它一定有 BMap
}

const Demo = () => {
  // 这里直接调用 BMap 对象会报错
  return (
    <div style={{ width: '100%' }}>
      <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
        <Example />
      </APILoader>
    </div>
  );
}

<APILoader> 组件用于加载百度地图 SDK，没有加载完成，全局没有挂在 BMap 对象，可能报错

2. 存在组件套组件的陷阱

组件可以呈现其他组件，但您绝不能嵌套它们的定义：

export default function Gallery() {
  // 🔴 永远不要在另一个组件中定义一个组件！
  function Profile() {
    // ...
  }
  // ...
}

上面的代码片段非常慢并导致错误。 相反，定义 顶层的每个组件：

export default function Gallery() {
  // ...
}

// ✅ 在顶层声明组件
function Profile() {
  // ...
}

你可以整理一下你的代码，再去看看你的错误是否存在，

如果错误还存在，我再帮你排查一下，在再帮你调试的时候，最好给我一个简单可以重现的示例，帮助你快速定位错误问题 @KyrieZhangi

好的感谢！

[KyrieZhangi]

我看了你的代码，指出你写代码的几个问题，可能是它们引发的问题：

1. 在组件 <APILoader /> 调用的时候直接 是用 BMap 对象

const Example = () => {
  // .... 在这里写地图逻辑，如果没有 BMap 对象，此组件不会被执行
  //  所以它一定有 BMap
}

const Demo = () => {
  // 这里直接调用 BMap 对象会报错
  return (
    <div style={{ width: '100%' }}>
      <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
        <Example />
      </APILoader>
    </div>
  );
}

<APILoader> 组件用于加载百度地图 SDK，没有加载完成，全局没有挂在 BMap 对象，可能报错

2. 存在组件套组件的陷阱

组件可以呈现其他组件，但您绝不能嵌套它们的定义：

export default function Gallery() {
  // 🔴 永远不要在另一个组件中定义一个组件！
  function Profile() {
    // ...
  }
  // ...
}

上面的代码片段非常慢并导致错误。 相反，定义 顶层的每个组件：

export default function Gallery() {
  // ...
}

// ✅ 在顶层声明组件
function Profile() {
  // ...
}

你可以整理一下你的代码，再去看看你的错误是否存在， 如果错误还存在，我再帮你排查一下，在再帮你调试的时候，最好给我一个简单可以重现的示例，帮助你快速定位错误问题 @KyrieZhangi

好的感谢！

[KyrieZhangi]

您好 我把组件移出去 addControl enableScrollWheelZoom 这些会接连报错 目前在调试工具看到的就是原本最平常状态 但我输入单号会返回两组坐标 我把他传回ExampleMap组件 但是页面就会出现白屏的情况 有时候也是可以正常刷出地图的（正常时候的情况占10%） 因为有vpn限制所以不太方便能做出相同的示例 @jaywcjlove

[KyrieZhangi]

您好 我把组件移出去 addControl enableScrollWheelZoom 这些会接连报错 目前在调试工具看到的就是原本最平常状态 但我输入单号会返回两组坐标 我把他传回ExampleMap组件 但是页面就会出现白屏的情况 有时候也是可以正常刷出地图的（正常时候的情况占10%） 因为有vpn限制所以不太方便能做出相同的示例 @jaywcjlove

现在的问题就是我传入坐标绘制线形 但是线不出来。。。。。。。 @jaywcjlove