vue 百度地圖api進行地理解析(解決跨域問題)

先扯一下子

首先很是感謝你們的閱讀(感謝已加粗),這是我人生中第一次寫技術文章(之前打字都費勁),本人小white一個(秀一下英語詞彙量),技術不咋地,就是愛分享,動不動還來個原創,你說氣人不~ 閒話少說,進入主題!!!php


重點部分

最近在作一個基於vue的設備管理系統,其中有一個需求:須要把設備所在地的地址採用紅點標記定位在百度地圖上(相似於摩拜單車app附近的車標記)。我採用了vue-baidu-Map插件(原生百度地圖api的二次封裝),可是插件裏的紅點標記須要用到經緯度值。那麼問題來了(配音:來了來了真的來了~)
如何把設備所在地轉換成經緯度值???
1.百度API文檔---地址解析
等到三根頭髮落地以後,找到了一個好用的地理解析API文檔css

clipboard.png
首先用瀏覽器在地址欄訪訪問一下,結果成功返回經緯度值(用腳趾給本身比個心),對了,這個ak須要本身去申請(不要錢,別怕),以後我用axios進行請求,結果出現了跨域問題!html

2.如何解決跨域?
開發環境中我使用了proxyTable代理解決跨域(見下圖),原理是經過webpack設置在node服務器實現了反向代理(原理這句話不知道說的對不對,還請你們糾正~)
clipboard.png
可是項目最終npm run build打包上線事後就變成了單純的js、html、css文件了(單頁面SPA),由於proxyTable代理要依靠腳手架中node環境所支持,所以proxyTable方法在生產環境中仍是會跨域(開發環境中無敵),不過也沒事,由於在線上遇到跨域問題主要仍是靠後端解決! 可是往下瞅 (瞅就是看,順便教你們點兒東北話,雙語教學~)vue

3.依靠百度地圖api文檔提供的參數,經過jsonp最終解決開發/生產環境的跨域問題
clipboard.png
a、在vue項目中引入jsonp
b.參考官方文檔,寫出以下代碼
clipboard.png
c.最終沒有跨域問題,而且成功接收百度返回的數據node

收尾

以上就是我爲你們帶來的分享,由於並非很難的問題,並且上面也總結的很清晰了,因此我就再也不作最後總結了(嘮叨、墨跡),很是感謝你們耐心看完(感謝繼續加粗)
我的微信 往下瞅! 你瞅啥,瞅你咋地,再瞅一個試試,試試就試試webpack

歡迎你們之後一塊兒交流與學習~ 打卡下班
clipboard.pngios

相關文章
相關標籤/搜索