背景
今天做一个小页面,这个页面基于百度地图,功能是你输入起始点位置,然后给你规划一条路径并且在地图上可视化出来,当然完成这项工作都是站在百度的肩膀上,在你输入起始点后,需要通过百度地图接口——地理编码服务,正编码接口可以负责把地址名转成经纬度,然后再调用另一个接口得到规划的路径在地图上显示出来。
童鞋们在调用这个接口的时候一定要尽量把地址给写详细了,不然就会出现诸如黄鹤楼迁址北京,清华大学迁址四川这般的乾坤大挪移,还是乖乖输入“武汉黄鹤楼公园”和“北京清华大学”吧(真是产品经理看了沉默,程序员看了流泪系列)
问题
直接调用百度地图的接口会产生跨域问题,也就是说它的这个接口没有设置Access-Control-Allow-Origin
(你或许可以在自己的后端封装一个接口然后设置ACAO头),从官方文档上看,他们提供的前端跨域方式为jsonp方案
。
如果是直接在前端写jsonp代码(jQuery中的$.ajax也可以方便地设置jsonp模式),那我们的确就可以拿到我们想要的数据,但是问题是在Vue
中这样做貌似行不通。
踩坑
同文件下原生jsonp写法肯定是行的,这里就不说了,主要是把方法封装在了另一个js文件里
最开始在我封装的方法中我是这样写的:
export function baidu_api_point(place_wanted, callback) {
axios({
method: "get",
url: `http://api.map.baidu.com/geocoding/v3/?address=${
place_wanted}&output=json&ak=我的AK`
})
.then(callback