最近的項(xiàng)目用到了echarts一個(gè)帶有散點(diǎn)地圖的圖表,按照正常jquery寫法應(yīng)該使用ajax請求geojson的數(shù)據(jù)動態(tài)去切換地圖,就像下面這樣

$.get('Js/map/' + cityData.name + '.json', function(geoJson) {map('gr-map', cityData, geoJson, geoCoordMap);//調(diào)用地圖方法});

頁面顯示(成功)

but我們使用vue重構(gòu)了這個(gè)項(xiàng)目,在寫到這里的時(shí)候發(fā)現(xiàn)地圖不顯示了,結(jié)果報(bào)錯(cuò)

在這里使用的vue-axios去請求數(shù)據(jù),寫法如下

var url = 'http://localhost:8080/static/map' + cityData.name + '.json';console.log(url)this.$http.get(url).then(geoJson => {// 請求數(shù)據(jù)成功if (geoJson) {that.map('gr-map', cityData, geoJson, geoCoordMap);}}, response => {//請求數(shù)據(jù)失敗});

套路還是原來的套路,配方還是原來的配方,但是為啥會報(bào)錯(cuò)呢,第一反應(yīng)就是地圖沒有注冊上,找到注冊地圖的代碼發(fā)現(xiàn)也沒有問題,既然如此那就是數(shù)據(jù)有問題了,分別將j使用query里get方法請求的json數(shù)據(jù)和使用axios請求的數(shù)據(jù)打印出來,果然問題出在這里

打印結(jié)果如下:

jquery(只返回了一個(gè)正常的json數(shù)據(jù))

axios(返回了一個(gè)完整的包含各種狀態(tài)信息的對象,geoJson被存在其中的data屬性里)

而注冊地圖時(shí)只需要用到data里的數(shù)據(jù)就行了,所以將原來的代碼改正如下

終于成功了,腦袋疼!!!

轉(zhuǎn)載于:https://www.cnblogs.com/Smiled/p/7691112.html

總結(jié)

以上是生活随笔為你收集整理的使用vue-axios请求geoJson数据报错的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。