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

Freeman 發布于2019-08-26 10:13 / 3132人閱讀

摘要：我采用了插件原生百度地圖的二次封裝，但是插件里的紅點標記需要用到經緯度值。

先扯一會兒

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

重點部分

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

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

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

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

3.依靠百度地圖api文檔提供的參數，通過jsonp最終解決開發/生產環境的跨域問題

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

c.最終沒有跨域問題，并且成功接收百度返回的數據

收尾

以上就是我為大家帶來的分享，因為并不是很難的問題，而且上面也總結的很清晰了，所以我就不再做最后總結了(嘮叨、墨跡)，非常感謝大家耐心看完(感謝繼續加粗)
個人微信往下瞅！ 你瞅啥，瞅你咋地，再瞅一個試試，試試就試試

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

GPU云服務器云服務器百度地圖api 百度地圖地址解析百度地圖api調用百度地圖搜索api

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105815.html

百度地圖開發實例番外篇--實用方法（持續更新）

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

CocoaChina 2019-08-22 13:53 評論0 收藏0
vue-cli+webpack開發流程總結

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

shiweifu 2019-08-23 14:55 評論0 收藏0