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

相关文章

来自专栏木头编程 - moTzxx

小程序图片长按识别功能的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

471
来自专栏前端说吧

JS-【同页面多次调用】轮播特效封装-json传多个参数

3505
来自专栏lonelydawn的前端猿区

keyframes在不同浏览器中的表现性

一、keyframes的使用方法 keyframes是css3实现动画的一种方式。 简单的使用规则如下: 先定义元素的动画样式,并设置动画的名称 selecto...

2446
来自专栏小瞳的专栏

Python学习之爬虫入门

爬虫是一种用来自动浏览万维网的网络机器人(英语:Internet bot)。其目的一般为编纂网络索引(英语:Web indexing)。网络搜索引擎等站点通过爬...

1552
来自专栏Youngxj

emlog侧边栏添加百度一下

1487
来自专栏Android小菜鸡

解决设置控件Alpha透明引发的问题

  如果中间部分有个底层白色透明容器。在对该容器设置alpha="0.8"后,问题出来了,容器内的控件都被透明了,但是登陆按钮规定是不能透明的。

1124
来自专栏微信小程序开发

微信小程序开发应该注意的问题

小程序是微信主推的产品,现在也有不少公司的产品已经开发了小程序版本。那么,开发小程序你需要了解哪些知识? 1、使用微信web开发者工具 此工具是微信官方提供的小...

2788
来自专栏HTML5学堂

【系列】移动端项目经验 表单兼容(下篇)

【系列】移动端项目经验 表单兼容(下篇) HTML5学堂:本文,我们将继续为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,主要包括调用相...

34612
来自专栏PHP实战技术

PHP面向对象编程基本原则

首先祝大家节日快乐!!! ? 额,不知道你们剁手没,小梦是没有!整整已经错过了第九个年头! ? 小伙伴是不是有一种感觉,PHP入门的时候简直爱不释手,总是把 ...

3189
来自专栏Crossin的编程教室

【编程课堂】以 jQuery 之名 - 爬虫利器 PyQuery

很多读者在学习了 Python 之后都想做一些爬虫程序,去网上采集数据或完成一些自动化操作。因此,我们也制作了一套爬虫实战课程,目前正在最后的完善中,很快将和各...

2997

扫码关注云+社区