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

最新推荐文章于 2025-06-18 19:44:03 发布

Roc Loong

最新推荐文章于 2025-06-18 19:44:03 发布

阅读量1.9w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：开发经验文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/github_33538490/article/details/114028878

开发经验专栏收录该内容

2 篇文章

订阅专栏

在使用Element-UI和vue-amap开发过程中，遇到Dialog内嵌地图时InvalidObject:LngLat(NaN,NaN)的错误，文章详述了如何定位并修复center和maker.position为空数组的问题，适合Vue开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

高德地图 vue-amap 开发遇到的报错

项目技术栈

Element-UI
Vue
vue-amap

在开发一个<el-dialog>嵌套高德地图的时候，发现了一个问题，控制台报错了⬇️

Invalid Object: LngLat(NaN, NaN)

后来检查得知，原来是center和maker.position为空数组[]，所以才会出现以上错误，要检查相关赋值的地方有没有哪里导致上面两个值为空

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Roc Loong

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

高德地图Error: Invalid Object: LngLat(NaN, NaN)报错

weixin_54231578的博客

07-23

839

这个报错一开始出现的莫名奇妙，不清楚哪里触发的，找了解决答案，很多都是设置高度就能解决问题。结果无效（有些页面应该可以解决），后来同事也有类似问题，说滚动就会报错（），其他页面数据过多，出现滚动条就会报错。设置绝对定位，终于解决了。

(vue3+ts)高德地图不显示地图信息并报错：Error Invalid Object LngLat(NaN, NaN)

m0_74825360的博客

12-12

592

错误并确保地图正确显示，需要仔细检查所有与经纬度相关的操作，确保所有经纬度数据都是有效的。如果还是没有解决你的问题，可以根据文章开始的部分举出的三个点，来挨着进行判断检查。如果你的还不行：可以再看一下：1、确保在接收参数的时候他们都是有效的经纬度。改了之后就没报错了，也能正确显示定位的地图。1、确保在接收参数的时候他们都是有效的经纬度。是有效的经纬度数据。如果无效，提供默认值。我的问题最后出在了【初始化地图的时候】2、初始化地图的时候，也需要确保。对象的地方，确保数据有效性。

1 条评论您还未登录，请先登录后发表或查看评论

使用高德地图报错：Invalid Object: LngLat(NaN, NaN)

m0_73898841的博客

12-19

2846

这样就能显示了。

高德地图报错Uncaught Error: Invalid Object: LngLat(NaN, NaN)

最新发布

qq_61140658的博客

06-18

447

在使用高德地图API时遇到"InvalidObject:LngLat(NaN,NaN)"报错，原因是地图容器尺寸计算失败。当容器使用position:relative时，由于Quasar UI中父元素默认高度为0，导致地图无法获取有效尺寸。解决方法有：1) 将容器改为position:absolute，使其脱离文档流；2) 确保所有父元素(html到容器)设置height:100%，使relative定位也能获取正确尺寸。问题本质在于地图初始化需要获取明确的容器尺寸，否则会导致坐标计算异

高德地图Uncaught Error: Invalid Object: LngLat(NaN, NaN)报错

bidepanm的博客

10-08

2146

可能因为没有设置高度。

vue3引入高德地图报错Uncaught Error: Invalid Object: LngLat(NaN, NaN

miin_ying的博客

12-18

3037

原因：容器高度未设置。

Invalid Object: LngLat(NaN, NaN)高德地图报错

2301_80636534的博客

09-23

1318

解决方法：地图初始化之后，先进行数据渲染，再进行位置标记。原因二：地图渲染比数据渲染快，数据没有跟上导致报错。

vue 使用高德地图vue-amap组件过程解析

12-10

这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先 npm install -S vue-amap 然后在 main.js ...

vue调用高德可能会报错Error: Invalid Object: Pixel(NaN, NaN)

qq_53212137的博客

04-19

1377

所以在用高德地图的时候这个数据报错，如果直接用的人家的代码基础上修改的话，数据引用的一般都是在线数据所以数据可能不会出错。这个报错可能是你地图容器什么的没有弄好。这种情况Gpt说的是可能数据不对，但是我用的是高德官方的数据直接拿过来弄的，而且我每个数据都输出打印了。这个代码在写地图div容器的时候我没有给这个div给style，然后给了。

Ionic使用模态框重复打开高德地图报错

m0_37905772的博客

06-22

1836

Ionic6(ionic-vue)使用高德地图报错，使用ionc-modal加载地图，重复打开后报错LngLat(NaN,NaN)

(vue3+ts)高德地图不显示地图信息并报错：Error: Invalid Object: LngLat(NaN, NaN)

qq_62442040的博客

08-07

1900

Vue3+高德JS APi Invalid Object: LngLat(NaN, NaN)

weixin_59750951的博客

10-22

757

高德地图 js api 2.0create-vue生成的Vue3。

高德地图突然报错“Uncaught (in promise) Error: Invalid Object:LngLat(NaN， NaN)”

熬夜搬码员的博客

04-04

2941

引用高德地图的时候，报以下错误：原因：是标记的经纬度没有。

Vue2使用高德地图报错Invalid Object: LngLat(NaN, NaN)

feng4175的博客

06-08

4958

在高得开放平台注册好key和secret后（注册步骤百度到处都是），在vue2项目中引入使用，这里我只是闲的无聊自己试试地图，之前没有过地图相关开发。引入地图及过程其实我也是百度的。一切按部就班，全部结束后，从新跑项目，报错了，一脸懵逼状态。Invalid Object: LngLat(NaN, NaN)页面报错，无法显示，但是说实话代码是按照别人上传的一步一步来的，中间没啥改动。其实第一次加载的话，我这里最后找到的原因是地图的容器盒子的宽高有问题。然后地图就神奇的出来了。

【高德地图】Uncatch Invaild object:pixel(NaN,Nan)或者Uncatch （in promise） invaild object:LngLat(NaN,Nan)：

SunPeng的博客

07-25

5248

【高德地图】Uncatch Invaild object:pixel(NaN,Nan)或者Uncatch （in promise） invaild object:LngLat(NaN,Nan)：

【高德地图-JS】Vue2加载高德地图API报错Invalid Object: LngLat(NaN, NaN)

m0_58960403的博客

11-22

943

地图的容器盒子的宽高的问题。

Error in v-on handler: “Invalid Object: LngLat(NaN, NaN)“

imkaifan的博客

07-15

9701

报错信息： Error in v-on handler: “Invalid Object: LngLat(NaN, NaN)” 原因：有的撒点经纬度，没有值，导致标记不上点。

vue-amap 使用时控制台报错 Uncaught Invalid Object: Pixel(NaN, NaN)和Uncaught Invalid Object: LngLat(NaN, NaN)

hudabao888666的博客

08-03

1669

Uncaught Invalid Object: Pixel(NaN, NaN)和Uncaught Invalid Object: LngLat(NaN, NaN)

高德地图Uncaught Invalid Object: Pixel(NaN, NaN)和Uncaught Invalid Object: LngLat(NaN, NaN)

qq_45530512的博客

03-24

2832

经纬度为空[]或unll或undefined。经纬度为空的数据排除掉。

handler: Invalid Object: LngLat(NaN, NaN)解决方法

08-30

对于问题"handler: Invalid Object: LngLat(NaN, NaN)"的解决方法，可以采取以下几个步骤： 1. 查看center和position数据类型是否正确。确保center是一个非空的数组，且类型为[number, number]。可以通过console.log或者debugger来验证center的值和类型是否正确。 2. 检查地图容器是否设置了正确的宽度和高度。确保div容器的宽度和高度样式已经正确设置，以确保地图可以正确显示。例如，可以通过设置样式类或通过直接设置div元素的style属性来设置宽度和高度。 3. 检查相关赋值的地方，看是否有地方导致了center和marker.position的值为空数组[]。可以仔细检查代码中对center和marker.position赋值的逻辑，确保它们被正确地赋值为非空数组。综上所述，解决"handler: Invalid Object: LngLat(NaN, NaN)"的方法包括检查center和position的数据类型、确保地图容器设置了正确的宽度和高度，以及检查相关赋值的地方是否导致了center和marker.position的值为空数组。通过逐一排查这些可能的问题，可以解决该错误。123 #### 引用[.reference_title] - *1* *3* [高德地图 vue-amap LngLat(NaN, NaN) 报错](https://blog.youkuaiyun.com/github_33538490/article/details/114028878)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [高德地图 react-amap LngLat(NaN, NaN) 报错](https://blog.youkuaiyun.com/czq_2020/article/details/129795912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]