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

2023-08-25 0 8,822 百度已收录

拉一会儿

首先,非常感谢您的阅读(感谢已加粗)。 这是我人生第一次写技术文章(打字很辛苦)。 我是小白(秀英文词汇),技术不好,就是爱分享,总想出一个原创,如果你说烦的话~别聊了,进入正题吧! ! !

关键部分

最近在做一个基于vue的设备管理系统,有一个需求:设备的地址需要在百度地图上以红点标记定位(类似于摩拜单车app附近的汽车标记)。 我使用的是vue-baidu-Map插件(原生百度地图api的二次封装),插件中的红点标记需要使用经度和经度值。 来了这样一个问题(画外音:来了,真的来了~)

如何将设备的位置转换为经度值? ? ?

1. 百度API文档---地址解析

三根头发落地后,我发现了一个有用的地理分析API文档

首先使用浏览器在地址栏访问,结果成功返回经度值(自己用手指对比一下)。 对了,这个ak需要自己去申请(没钱别怕),然后我用axios去请求百度地图javascript,结果是跨域问题!

2.如何解决跨域?

在开发环境中,我使用proxyTable代理来解决跨域(见右图)。 原理是通过webpack设置在node服务器上实现反向代理(原理不确定这句话是否正确,请指正~)

然而项目最终被npmrunbuild打包上线后,就变成了一个简单的js、html、css文件(单页SPA)。 由于proxyTable代理需要脚手架中的node环境支持,所以proxyTable方法在生产环境中仍然会跨域(开发环境无敌),不过没关系,因为主要解决了线上遇到的跨域问题通过前端! 还有往下看(就看吧,顺便教你一些西北话,双语教学~)

3、借助百度地图api文档提供的参数,最终通过jsonp解决了开发/生产环境的跨域问题

A。 vue项目中引入jsonp

b. 参考官方文档,编写如下代码

C。 最终没有出现跨域问题,但是成功接收到了百度返回的数据

拖地

以上就是我给大家带来的分享。 由于不是很难的问题,但是也总结得很清楚了,所以我就不做最后的总结了(啰嗦百度地图javascript,墨迹),非常感谢大家耐心看完(谢谢继续加粗)

个人沫沫往下看!你在看什么,你在做什么,再看看试试,试试吧

欢迎大家以后一起交流学习~打卡上班

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript 百度地图javascript-vue百度地图api进行地理分析(解决跨域问题) https://www.wkzy.net/game/150951.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务