使用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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

XSS编码剖析

作者 0xExploit 0×00 引言 很多不了解html、js编码的童鞋挖掘xss漏洞时,都是一顿乱插,姿势对了,就能获得快感,姿势不对,就么反应。另外在f...

2288
来自专栏木子昭的博客

Python3读写base64格式base64使用场景

? base64转换过程 这几天写web,需要将用户上传的图片,实时显示到前端页面,然后通过Jcrop裁剪,并将裁剪后的图片通过canvas...

3188
来自专栏Hongten

java开发_模仿百度文库_FlexPaper

下载地址:http://code.google.com/p/flexpaper/downloads/list

641
来自专栏IMWeb前端团队

JavaScript强化教程——Window Location

本文作者:IMWeb 王军 原文出处:IMWeb社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScr...

1719
来自专栏腾讯云商业智能分析团队的专栏

BI 产品中过滤器设置

在展示数据的组件上均可实现对数据的过滤,对已绑定数据的组件才能设置过滤条件。这里介绍一下常见过滤器的设置。

1791
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

这是一个Flash插件,swf是一种动画格式,实现效果应该是下面的Object内容

532
来自专栏Python小屋

Python在线考试系统防作弊功能的思路和实现

我自己用Python开发了一套教学管理软件,具有在线点名、提问、答疑、交作业、自测、在线考试、数据导入导出与汇总、Word试卷生成等多个功能,其中在线考试系统具...

2605
来自专栏Java 源码分析

markdown语法

Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 ...

2684
来自专栏Android干货

安卓开发中strings.xml的使用

1855
来自专栏数据小魔方

单元格格式/条件格式的妙用

今天跟大家分享一种常用的技巧——利用单元格格式/条件格式按颜色划分不同数据等级。 ▽▼▽ 这个技巧在绩效管理、成绩考评以及其他设计考核的工作中都会经常用到。首...

3847

扫描关注云+社区