uniapp中H5定位功能实现

1.要实现该功能 必须使用vue-jsonp进行跨域

JSONP是一种跨域数据请求的解决方案，它使用script元素来请求数据，再利用回调函数将数据传回页面。

Vue框架提供了对JSONP的支持，可以方便地在Vue应用中使用JSONP获取跨域数据。下面我们来了解一下Vue使用JSONP的步骤。

第一步：在Vue应用中安装jsonp插件:

yarn add vue-jsonp

第二步：在Vue应用入口处引用并安装jsonp插件:

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

2.要在uniapp的manifest.json中web配置中进行地图配置，填写腾讯地图api中的key，我个人使用的是腾讯地图

在 manifest.json的源码视图中，看到H5相关配置

 然后到你需要定位的页面写上一下代码

// #ifdef H5
let url = 'https://apis.map.qq.com/ws/geocoder/v1/'
let data = {
	location: res.latitude + ',' + res.longitude,
	key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC',
	output: 'jsonp',
	callback: 'jsonp'
	}
	console.log(this);
	this.$jsonp(url, data).then(res => {
	if (res.status == 0) {
		console.log(res)
				
	} else {
		console.log(res)
	}
	})
// #endif

以下是页面完整代码