页面调用地图离开页面后报 Error: Invalid Object: Pixel(NaN, NaN)

[codedart2018]

路由离开页面就开始报　Error: Invalid Object: Pixel(NaN, NaN)　这个错误，我试了下用基础的<Map>组件也会报这个。 react version: 17.0.2 uwi-amap: 1.8.3

封装组件代码

import React, { useEffect } from 'react';
import { Map, APILoader, ToolBarControl, ControlBarControl, Geolocation, AutoComplete, Marker } from '@uiw/react-amap';
import { useState } from 'react';
import { useRef } from 'react';
import { request } from '@@/plugin-request/request';
import { AMapProps } from './data';
import './style.less';

const prod = process.env.NODE_ENV === 'production';
const AMapComponents: React.FC<AMapProps> = (props) => {
  const { webKey, serverKey, value, onChange, onClick } = props;
  const [input, setInput] = useState();
  const mapInputRef = useRef<any>(null);

  const zoomToAccuracyBool = () => {
    return !(value?.lng != 0 && value?.lat != 0);
  };

  useEffect(() => {
    setInput(mapInputRef.current);
  }, []);

  return (
    <APILoader akay={webKey}>
      <div className="amap-warp">
        <div className="amap-warp__input-warp">
          <input ref={mapInputRef} className="ant-input" type="text" placeholder="输入关键词搜索" />
          {input && (
            <AutoComplete
              input={input}
              onSelect={(opts: any) => {
                const { poi } = opts;
                const loc = poi.location;
                const { lat } = loc;
                const { lng } = loc;
                const address = poi.district + poi.address;
                onClick?.({ lng, lat, address });
                onChange?.({ lng, lat });
              }}
            />
          )}
        </div>
        <Map
          zoom={15}
          viewMode={'3D'}
          center={value?.lng && value.lat ? [value.lng, value.lat] : undefined}
          onClick={(e: AMap.MapsEvent) => {
            const { lnglat } = e;
            const lng = lnglat.getLng?.();
            const lat = lnglat.getLat?.();
            const url = `${prod ? 'https://restapi.amap.com' : ''}/v3/geocode/regeo?output=json&location=${lng},${lat}&key=${serverKey}&radius=1000&extensions=base&batch=false&roadlevel=1`;

            function regeo(requestUrl: string) {
              return request(requestUrl, {
                method: 'GET'
              });
            }

            regeo(url).then((res) => {
              if (res.infocode === '10000') {
                onClick?.({ lng: lng as number, lat: lat as number, address: res.regeocode.formatted_address });
                onChange?.({ lng, lat });
              }
            });
          }}
        >
          {value?.lng && value?.lat && <Marker visiable={true} position={[value.lng, value.lat]} />}
          <ControlBarControl offset={[10, 120]} position="RB" />
          <Geolocation
            // 是否使用高精度定位，默认:true
            enableHighAccuracy={true}
            // 超过10秒后停止定位，默认：5s
            timeout={10000}
            // 定位按钮的停靠位置
            position="RB"
            // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            offset={[38, 85]}
            // 定位成功后是否自动移动到响应位置
            panToLocation={zoomToAccuracyBool()}
            // 定位成功后是否自动调整地图视野到定位点
            zoomToAccuracy={zoomToAccuracyBool()}
            // 是否显示定位点
            showMarker={zoomToAccuracyBool()}
          />
          <ToolBarControl offset={[38, 15]} position="RB" />
        </Map>
      </div>
    </APILoader>
  );
};

export default AMapComponents;

控制台完整错误：

maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1 Uncaught Error: Invalid Object: Pixel(NaN, NaN)
    at new Ho (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at Je.lngLatToContainer (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at ve.re._setStyle (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at ve.re.updateOverlay (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at ve.updateOverlay (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at fe.se.updateOverlay (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at fe.se.iy (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at Je.Bs.Yf (maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1)
    at maps?v=2.0&key=90b71656ec5d1935ecee211e1eb0b6f7&callback=load_amap_sdk:1

应该是离开页面组件没有销毁还在对坐标处理导致的一样。

[jaywcjlove]

@codedart2018 https://codesandbox.io/s/react-amap-demo-forked-68xq6 你在这个示例上重现一下我帮你调试一下

[codedart2018]

@codedart2018 https://codesandbox.io/s/react-amap-demo-forked-68xq6 你在这个示例上重现一下我帮你调试一下

代码我到是补了　现在运行不起来　一直502.

[codedart2018]

@codedart2018 https://codesandbox.io/s/react-amap-demo-forked-68xq6 你在这个示例上重现一下我帮你调试一下

我项目是用Ts写的。完整代码就是上面贴出来的。示例里面用的js有些删减。

[jaywcjlove]

你可以使用 https://codesandbox.io 建立 ts 项目 @codedart2018

[gzlcy]

改成2D就不报错了