成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Freeman / 3148人閱讀

摘要:我采用了插件原生百度地圖的二次封裝,但是插件里的紅點標記需要用到經(jīng)緯度值。

先扯一會兒

首先非常感謝大家的閱讀(感謝已加粗),這是我人生中第一次寫技術文章(以前打字都費勁),本人小white一個(秀一下英語詞匯量),技術不咋地,就是愛分享,動不動還來個原創(chuàng),你說氣人不~ 閑話少說,進入主題?。?!

重點部分

最近在做一個基于vue的設備管理系統(tǒng),其中有一個需求:需要把設備所在地的地址采用紅點標記定位在百度地圖上(類似于摩拜單車app附近的車標記)。我采用了vue-baidu-Map插件(原生百度地圖api的二次封裝),但是插件里的紅點標記需要用到經(jīng)緯度值。那么問題來了(配音:來了來了真的來了~)
如何把設備所在地轉(zhuǎn)換成經(jīng)緯度值???
1.百度API文檔---地址解析
等到三根頭發(fā)落地之后,找到了一個好用的地理解析API文檔


首先用瀏覽器在地址欄訪訪問一下,結(jié)果成功返回經(jīng)緯度值(用腳趾給自己比個心),對了,這個ak需要自己去申請(不要錢,別怕),之后我用axios進行請求,結(jié)果出現(xiàn)了跨域問題!

2.如何解決跨域?
開發(fā)環(huán)境中我使用了proxyTable代理解決跨域(見下圖),原理是通過webpack設置在node服務器實現(xiàn)了反向代理(原理這句話不知道說的對不對,還請大家糾正~)

但是項目最終npm run build打包上線過后就變成了單純的js、html、css文件了(單頁面SPA),因為proxyTable代理要依靠腳手架中node環(huán)境所支持,因此proxyTable方法在生產(chǎn)環(huán)境中還是會跨域(開發(fā)環(huán)境中無敵),不過也沒事,因為在線上遇到跨域問題主要還是靠后端解決! 但是往下瞅 (瞅就是看,順便教大家點兒東北話,雙語教學~)

3.依靠百度地圖api文檔提供的參數(shù),通過jsonp最終解決開發(fā)/生產(chǎn)環(huán)境的跨域問題

a、在vue項目中引入jsonp
b.參考官方文檔,寫出如下代碼

c.最終沒有跨域問題,并且成功接收百度返回的數(shù)據(jù)

收尾

以上就是我為大家?guī)淼姆窒?,因為并不是很難的問題,而且上面也總結(jié)的很清晰了,所以我就不再做最后總結(jié)了(嘮叨、墨跡),非常感謝大家耐心看完(感謝繼續(xù)加粗)
個人微信 往下瞅! 你瞅啥,瞅你咋地,再瞅一個試試,試試就試試

歡迎大家以后一起交流與學習~ 打卡下班

文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105815.html

相關文章

  • 百度地圖開發(fā)實例番外篇--實用方法(持續(xù)更新)

    摘要:一前言在使用百度地圖開發(fā)的過程中,查閱百度地圖官網(wǎng)基本上就能滿足開發(fā)的需求,但是有時候需要設置一些東西,很難在官網(wǎng)上查閱到相關的方法技巧。希望百度地圖能夠越來越強大,這樣開發(fā)者就可以愉快的開發(fā)了 一 前言 在使用百度地圖開發(fā)的過程中,查閱百度地圖官網(wǎng)demo基本上就能滿足開發(fā)的需求,但是有時候需要設置一些東西,很難在官網(wǎng)上查閱到相關的方法技巧。筆者特意把開發(fā)過程中遇到的一些疑難雜癥和解...

    CocoaChina 評論0 收藏0
  • vue-cli+webpack開發(fā)流程總結(jié)

    摘要:加載百度地圖后報錯的,我們再加載一遍你的秘鑰你的秘鑰為當前時間戳獲取方法 一、環(huán)境搭建 1、安裝node.js在計算機中https://nodejs.org/en/download/ (此為node.js官方下載地址)安裝完成后打開cmd命令提示符 node -v //查詢node版本號 npm -v //查詢npm版本號 2、如果npm使用網(wǎng)速跟不上...

    shiweifu 評論0 收藏0

發(fā)表評論

0條評論

Freeman

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<