高德地图 react-amap LngLat(NaN, NaN) 报错

解决React高德地图LngLat(NaN,NaN)报错问题

原创已于 2023-03-27 15:26:23 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-03-27 15:23:42 首次发布

文章主要讲述了在使用高德地图react-amap组件时遇到的LngLat坐标错误，即中心点坐标显示为(NaN,NaN)的问题。解决方案包括检查center和position的数据类型是否为number以及确保地图容器div设置了正确的宽高样式。

高德地图 react-amap LngLat(NaN, NaN) 报错

报错信息

在这里插入图片描述

解决办法

先查看center不为空，且数据类型为[number,number];
其次可能是地图contani没有宽高。

代码

// 解决办法1 查看center、position数据类型是否正确
const map1 = new window.AMap.Map("nav_viewer", {
  viewMode: "3D",
  center: center,
  zoom: 10,
});
let marker = new window.AMap.Marker({
    position: posi,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
});
// 解决办法2 div 必须设置宽高样式。
<div id="nav_viewer" className="width-100P height-640px"></div>