vue 百度地图api进行地理解析(解决跨域问题)

先扯一会儿

首先非常感谢大家的阅读(感谢已加粗),这是我人生中第一次写技术文章(以前打字都费劲),本人小white一个(秀一下英语词汇量),技术不咋地,就是爱分享,动不动还来个原创,你说气人不~ 闲话少说,进入主题!!!

重点部分

最近在做一个基于vue的设备管理系统,其中有一个需求:需要把设备所在地的地址采用红点标记定位在百度地图上(类似于摩拜单车app附近的车标记)。我采用了vue-baidu-Map插件(原生百度地图api的二次封装),但是插件里的红点标记需要用到经纬度值。那么问题来了(配音:来了来了真的来了~)
如何把设备所在地转换成经纬度值???
1.百度API文档—地址解析
等到三根头发落地之后,找到了一个好用的地理解析API文档

《vue 百度地图api进行地理解析(解决跨域问题)》
首先用浏览器在地址栏访访问一下,结果成功返回经纬度值(用脚趾给自己比个心),对了,这个ak需要自己去申请(不要钱,别怕),之后我用axios进行请求,结果出现了跨域问题!

2.如何解决跨域?
开发环境中我使用了proxyTable代理解决跨域(见下图),原理是通过webpack设置在node服务器实现了反向代理(原理这句话不知道说的对不对,还请大家纠正~)
《vue 百度地图api进行地理解析(解决跨域问题)》
但是项目最终npm run build打包上线过后就变成了单纯的js、html、css文件了(单页面SPA),因为proxyTable代理要依靠脚手架中node环境所支持,因此proxyTable方法在生产环境中还是会跨域(开发环境中无敌),不过也没事,因为在线上遇到跨域问题主要还是靠后端解决! 但是往下瞅 (瞅就是看,顺便教大家点儿东北话,双语教学~)

3.依靠百度地图api文档提供的参数,通过jsonp最终解决开发/生产环境的跨域问题
《vue 百度地图api进行地理解析(解决跨域问题)》
a、在vue项目中引入jsonp
b.参考官方文档,写出如下代码
《vue 百度地图api进行地理解析(解决跨域问题)》
c.最终没有跨域问题,并且成功接收百度返回的数据

收尾

以上就是我为大家带来的分享,因为并不是很难的问题,而且上面也总结的很清晰了,所以我就不再做最后总结了(唠叨、墨迹),非常感谢大家耐心看完(感谢继续加粗)
个人微信 往下瞅! 你瞅啥,瞅你咋地,再瞅一个试试,试试就试试

欢迎大家以后一起交流与学习~ 打卡下班
《vue 百度地图api进行地理解析(解决跨域问题)》

    原文作者:starwang
    原文地址: https://segmentfault.com/a/1190000019817141
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞