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

拟铭

已于 2023-03-27 15:26:23 修改

阅读量1.2k

点赞数 2

文章标签： javascript 前端开发语言

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

本文链接：https://blog.csdn.net/czq_2020/article/details/129795912

版权

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

摘要由CSDN通过智能技术生成

高德地图 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>