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

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

 

页面调用高德地图时,通过经纬度坐标,在地图上添加marker点的时候,报了这个错:

Uncaught Invalid Object: Pixel(NaN, NaN)

报错原因分析:

Pixel(NaN, NaN): 我们可以从控制台的错误信息知道提示坐标值为空,也就是我们传入的坐标是个空值

  • 原因1:  传入的坐标格式不是数组格式, 例如: position: {116.406315,39.908775}
  • 原因2:  传入的坐标不是number, 有可能是字符串, 例如:position: [“116.406315”, “39.908775” ],
  • 原因3:  传入的坐标就是一个空值 :[ ]

ps: 通过控制台直接console.log( coord ), 查看打印的坐标值是什么。

解决方案:

找到了错误出现的原因,那么我们就可以去一一的解决了。

这里要注意的高德地图API添加marker的坐标格式为数组类型

  • 方案1: 遍历所有的坐标, 将其格式转换成数组的格式,然都再去添加marker
  • 方案2: 倘若坐标不是number的类型我们可以遍历,然后坐标经纬度分别减0, 用这样的方法转成number类型:
this.markerList.push([
     item.location.lng-0,
     item.location.lat-0
]) 
  • 方案3: 如果坐标为空,那么就要检查自己获取的数据了。

高德地图在使用过程中经常为因为数据格式的问题报错, 这里我们一定要去控制台打印出来对照API的数据格式才能快速有效的解决问题。记录一下自己踩过的坑… …

微信关注“优月优”公众号,获取免费赠书。
提醒:本站所有图书/视频资源均索引自互联网,版权争议与本站无关。如有侵权或其他争议的可能性,请发起版权投诉,因本站未参与任何制作、转制、存储等任一环节,故无法对涉及到的资源进行删除,本站会依据DMCA原则, 对涉及的资源链接进行删除。因为所有图书资源均不属于本站,本站只提供索引服务,故本站不保证任何资源的准确性,权威性,请使用者自行判断。
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏