Uniapp之h5和小程序使用jsonp调用地图API

本篇要点：

1.h5使用jsonp调用地图api

2.微信小程序嗲用地图api

 1.h5开发使用jsonp调用地图API

开发场景：h5页面

操作步骤：

1.使用npm 安装 vue-jsonp

npm install vue-jsonp --save-dev

下载成功之后，node_modules目录下会有vue-jsonp文件 

2.在main.js配置vue-jsonp

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)

 main.js配置完大致如下：

 3.配置完main.js，就可以调用地图的API(获取经纬度，获取详细地址信息)：

1.根据经纬度获取详细地址信息

//that.ak 地图开发者后台获取的ak location 传需要获取经纬度
that.$jsonp(`https://api.map.baidu.com/reverse_geocoding/v3/?ak=${that.ak}&output=json&coordtype=wgs84ll&location=${point.latitude},${point.longitude}`)
    .then((res) => {
		//地址详细信息
}) 

使用之后，返回数据是json格式，如下： 

2.根据地址信息返回经纬度

//address 需要获取地址经纬度的名称
that.$jsonp(`https://api.map.baidu.com/geocoding/v3/?address=${name}&output=json&ak=${that.ak}&callback=showLocation`)
	.then((res) => {
		//返回的经纬度信息
}) 

使用之后，返回数据是json格式，如下： 

2.小程序调用地图API

开发场景：小程序

使用小程序时，就可以直接调用小程序自带的方法来调用地图API，如下：

wx.request({
	dataType:"jsonp",
	jsonp:"callback",
	type:"get",
	url:`https://api.map.baidu.com/reverse_geocoding/v3/?ak=${that.ak}&output=json&coordtype=wgs84ll&location=${point.latitude},${point.longitude}`,
	success: (res) => {
			console.log('地图',JSON.parse(res.data))
					
	}
})

 如上请求方法可以获取的信息如下：

分享不易，都观看到这里了，还不点赞收藏嘛！