最近的项目用到了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里的数据就行了,所以将原来的代码改正如下

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

使用vue-axios请求geoJson数据报错的问题的更多相关文章

  1. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  2. vue axios传参报错的解决方法

    今天有人问同一套后台系统为什么jquery可以正常使用,axios却报错呢,下面总结如下: 总的来说是jquery和axios传参类型不同,那为什么jquery和axios请求时传参类型不同? 1)j ...

  3. vue axios 请求 https 的特殊处理

    最近遇到自签发的CA证书,在前端axios请求https请求时,无法自动加载证书. 解决方法:将无法加载的请求在浏览器新窗口手动加载,选择继续连接. 重新加载,问题解决. 根本原因:因为自签发证书,浏 ...

  4. vue axios 请求本地接口端口不一致出现跨域设置代理

    首先在config下面的index.js,设置跨域代理 在axios请求的时候     用'/api/' 替代baseURL 最重要的就是设置完必须重新 npm run dev 否则不生效

  5. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  6. Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)

    1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...

  7. vue/axios请求拦截

    import axios from 'axios';import { Message } from 'element-ui';import Cookies from 'js-cookie';impor ...

  8. vue axios请求频繁时取消上一次请求

    一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求 ...

  9. vue axios请求超时,设置重新请求的完美解决方法

    //在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...

随机推荐

  1. RSA,DES,RC4,3DES ,MD5

    一,RSA算法基于一个十分简单的数论事实:将两个大质数相乘十分容易,但是想要对其乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥. RSA算法是一种非对称密码算法,所谓非对称,就是指该算法需 ...

  2. QT中几个函数的使用方法

    一.把字符串转换成整形demo1:QString str = "FF";bool ok;int hex = str.toInt(&ok, 16); // hex == 25 ...

  3. 本机向windows服务器传输文件的三种方法

    闲来无事,在腾讯云上申请了一个免费的服务器,想将自己写的网页发布到服务器上,服务器的申请很简单,百度搜索 腾讯云 ,然后新人第一次注册能申请到免费一个月的云主机,虽然配置不怎么高,但是还是能用的,这是 ...

  4. Git详解之二:Git基础

    Git 基础 读完本章你就能上手使用 Git 了(伯乐在线注:如果你对Git还不了解,建议从本Git系列第一篇文章开始阅读).本章将介绍几个最基本的,也是最常用的 Git 命令,以后绝大多数时间里用到 ...

  5. Keep Mind Working

    想找一个这样的地方,可以让脑袋持续运转着.不会像游戏一样让人着迷,不会像有色电视一样让人想错地方,也不会像工作一样充满太多严密.就是让脑袋继续转着,适意地思考些什么. 之前会跑去游戏里,至少没有太污. ...

  6. 适合小白/外行的git与github最基础最浅显教程

    首先声明,这是适合小白/外行/初学者/学生看的最基础最简单的git与github教程,已经能使用svn,git等工具的朋友请不要看这篇文章来浪费时间了. 想进一步学习git的,推荐去廖雪峰博客学习. ...

  7. js设置元素class方法小结及classList相关

        给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...

  8. python重试装饰器的简单实现

    简单实现了一个在函数执行出现异常时自动重试的装饰器,支持控制最多重试次数,每次重试间隔,每次重试间隔时间递增. 最新的代码可以访问从github上获取 https://github.com/black ...

  9. 基础环境之Docker入门

    随着Docker技术的不断成熟,越来越多的企业开始考虑使用Docker.Docker有很多的优势,本文主要讲述了Docker的五个最重要优势,即持续集成.版本控制.可移植性.隔离性和安全性. 有了Do ...

  10. PHP curl请求https遇到的坑

    PHP里curl对https的证书配置默认是服务器端要求验证的,如果服务器端没有配置证书验证,则无法请求https路径.如果为了简便使用不需要配置https证书的话,配置curl时将以下两项设置为fa ...