最近的項目用到了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里的數據就行了,所以將原來的代碼改正如下

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

轉載于:https://www.cnblogs.com/Smiled/p/7691112.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。