使用vue-axios请求geoJson数据报错的问题

最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样

 $.get('Js/map/' + cityData.name + '.json', function(geoJson) {
         map('gr-map', cityData, geoJson, geoCoordMap);//调用地图方法
       });

页面显示(成功)

but我们使用vue重构了这个项目,在写到这里的时候发现地图不显示了,结果报错

在这里使用的vue-axios去请求数据,写法如下

 var url = 'http://localhost:8080/static/map' + cityData.name + '.json';
  console.log(url)
 this.$http.get(url).then(geoJson => {
  // 请求数据成功
   if (geoJson) {
      that.map('gr-map', cityData, geoJson, geoCoordMap);
      }
       }, response => {
          //请求数据失败
       });

套路还是原来的套路,配方还是原来的配方,但是为啥会报错呢,第一反应就是地图没有注册上,找到注册地图的代码发现也没有问题,既然如此那就是数据有问题了,分别将j使用query里get方法请求的json数据和使用axios请求的数据打印出来,果然问题出在这里

打印结果如下:

jquery(只返回了一个正常的json数据)

axios(返回了一个完整的包含各种状态信息的对象,geoJson被存在其中的data属性里)

而注册地图时只需要用到data里的数据就行了,所以将原来的代码改正如下

终于成功了,脑袋疼!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏何俊林

视频播放器本地代理服务设计

4442
来自专栏liuchengxu

如何让 Vim 美观又实用(1)

我学习计算机不久就开始用了 vim,到现在也三四年了,且算是对 vim 有了一定的控制力。在这里分享一下使用过程中的一些“心路历程”,说实话,要留意的小地方有很...

1052
来自专栏FreeBuf

利用Wireshark任意获取QQ好友IP实施精准定位

虽然网上已经有了很多获取IP的qq插件,但是其原理大致都是相同的,但是插件的安全性而言就不敢恭维了,下面介绍如何利用wireshark获取好友ip。 一、打开w...

8323
来自专栏JAVA高级架构开发

为什么微服务一定要有网关?

2、过滤器:在服务网关中可以完成一系列的横切功能,例如权限校验、限流以及监控等,这些都可以通过过滤器完成(其实路由转发也是通过过滤器实现的)。

2090
来自专栏架构师之路

细聊冗余表数据一致性(架构师之路)

本文主要讨论四个问题: (1)为什么会有冗余表的需求 (2)如何实现冗余表 (3)正反冗余表谁先执行 (4)冗余表如何保证数据的一致性 一、需求缘起 互联网很多...

4928
来自专栏知识分享

关于STM32的外部引脚中断的问题

今天想用自己以前的比较干净的工程模板做一个东西,,,,,,,在添加上引脚中断的时候,,突然想知道自己配置的中断优先级是否正确执行,,,,, 以前刚学习32的时候...

3576
来自专栏微服务生态

NRedis-Proxy 高性能Redis 中间件服务原理解析

受飞凡电商技术负责人刘兵先生的独家授权,在csdn博客我原创发表《NRedis-Proxy 高性能Redis 中间件服务》的架构原理,以及项目开源介绍。 一、...

1934
来自专栏性能与架构

Kafka 是否可以用做长期数据存储?

问题 “把 Kafka 作为长期存储有问题吗?” 这是一个非常常见的问题,我们知道,Kafka 是这样存储日志记录的 ? 答案是“可以”,只要把数据保留时间设置...

4639
来自专栏程序你好

消息通知子系统用户需求

1834
来自专栏运维小白

19.2 zabbix监控介绍

zabbix监控介绍 C/S架构,基于C++开发,监控中心支持web界面配置和管理 zabbix软件,是C/S架构:有一个服务端,去客户端抓数据。在客户端必须...

22310

扫码关注云+社区