資訊專欄INFORMATION COLUMN
摘要：我采用了插件原生百度地圖的二次封裝，但是插件里的紅點(diǎn)標(biāo)記需要用到經(jīng)緯度值。
先扯一會(huì)兒
首先非常感謝大家的閱讀(感謝已加粗)，這是我人生中第一次寫技術(shù)文章(以前打字都費(fèi)勁)，本人小white一個(gè)(秀一下英語(yǔ)詞匯量)，技術(shù)不咋地，就是愛(ài)分享，動(dòng)不動(dòng)還來(lái)個(gè)原創(chuàng)，你說(shuō)氣人不~ 閑話少說(shuō)，進(jìn)入主題！！！
重點(diǎn)部分最近在做一個(gè)基于vue的設(shè)備管理系統(tǒng)，其中有一個(gè)需求：需要把設(shè)備所在地的地址采用紅點(diǎn)標(biāo)記定位在百度地圖上(類似于摩拜單車app附近的車標(biāo)記)。我采用了vue-baidu-Map插件(原生百度地圖api的二次封裝)，但是插件里的紅點(diǎn)標(biāo)記需要用到經(jīng)緯度值。那么問(wèn)題來(lái)了(配音：來(lái)了來(lái)了真的來(lái)了~)
如何把設(shè)備所在地轉(zhuǎn)換成經(jīng)緯度值？？？
1.百度API文檔---地址解析
等到三根頭發(fā)落地之后，找到了一個(gè)好用的地理解析API文檔
首先用瀏覽器在地址欄訪訪問(wèn)一下，結(jié)果成功返回經(jīng)緯度值(用腳趾給自己比個(gè)心)，對(duì)了，這個(gè)ak需要自己去申請(qǐng)(不要錢，別怕)，之后我用axios進(jìn)行請(qǐng)求，結(jié)果出現(xiàn)了跨域問(wèn)題！
2.如何解決跨域？
在開發(fā)環(huán)境中我使用了proxyTable代理解決跨域(見(jiàn)下圖)，原理是通過(guò)webpack設(shè)置在node服務(wù)器實(shí)現(xiàn)了反向代理(原理這句話不知道說(shuō)的對(duì)不對(duì)，還請(qǐng)大家糾正~)
但是項(xiàng)目最終npm run build打包上線過(guò)后就變成了單純的js、html、css文件了(單頁(yè)面SPA)，因?yàn)閜roxyTable代理要依靠腳手架中node環(huán)境所支持，因此proxyTable方法在生產(chǎn)環(huán)境中還是會(huì)跨域(開發(fā)環(huán)境中無(wú)敵)，不過(guò)也沒(méi)事，因?yàn)樵诰€上遇到跨域問(wèn)題主要還是靠后端解決! 但是往下瞅 (瞅就是看，順便教大家點(diǎn)兒東北話，雙語(yǔ)教學(xué)~)
3.依靠百度地圖api文檔提供的參數(shù)，通過(guò)jsonp最終解決開發(fā)/生產(chǎn)環(huán)境的跨域問(wèn)題
a、在vue項(xiàng)目中引入jsonp
b.參考官方文檔，寫出如下代碼
c.最終沒(méi)有跨域問(wèn)題，并且成功接收百度返回的數(shù)據(jù)
以上就是我為大家?guī)?lái)的分享，因?yàn)椴⒉皇呛茈y的問(wèn)題，而且上面也總結(jié)的很清晰了，所以我就不再做最后總結(jié)了(嘮叨、墨跡)，非常感謝大家耐心看完(感謝繼續(xù)加粗)
個(gè)人微信 往下瞅！ 你瞅啥，瞅你咋地，再瞅一個(gè)試試，試試就試試
歡迎大家以后一起交流與學(xué)習(xí)~ 打卡下班
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/105815.html
摘要：一前言在使用百度地圖開發(fā)的過(guò)程中，查閱百度地圖官網(wǎng)基本上就能滿足開發(fā)的需求，但是有時(shí)候需要設(shè)置一些東西，很難在官網(wǎng)上查閱到相關(guān)的方法技巧。希望百度地圖能夠越來(lái)越強(qiáng)大，這樣開發(fā)者就可以愉快的開發(fā)了 一 前言 在使用百度地圖開發(fā)的過(guò)程中，查閱百度地圖官網(wǎng)demo基本上就能滿足開發(fā)的需求，但是有時(shí)候需要設(shè)置一些東西，很難在官網(wǎng)上查閱到相關(guān)的方法技巧。筆者特意把開發(fā)過(guò)程中遇到的一些疑難雜癥和解...
摘要：加載百度地圖后報(bào)錯(cuò)的，我們?cè)偌虞d一遍你的秘鑰你的秘鑰為當(dāng)前時(shí)間戳獲取方法 一、環(huán)境搭建 1、安裝node.js在計(jì)算機(jī)中https://nodejs.org/en/download/ （此為node.js官方下載地址）安裝完成后打開cmd命令提示符 node -v //查詢node版本號(hào) npm -v //查詢npm版本號(hào) 2、如果npm使用網(wǎng)速跟不上...
閱讀 3416·2023-04-26 02:41
閱讀 2472·2023-04-26 00:14
閱讀 2891·2021-08-11 10:22
閱讀 1295·2019-12-27 11:38
閱讀 3583·2019-08-29 18:34
閱讀 2390·2019-08-29 12:13
閱讀 2964·2019-08-26 18:26
閱讀 1878·2019-08-26 16:49
