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

以下是页面完整代码

<template>
	<view>
		<!-- #ifdef MP -->
		<search-slot>
			<view class="mx-1" slot="left">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
			<view class="flex-1 search-title text-muted" slot="center" @click="goSearch">
				请输入搜索内容
			</view>
			<view class="mx-1" slot="right" @click="scanCode">
				<text class="iconfont icon-richscan_icon"></text>
			</view>
		</search-slot>
		<!-- #endif -->
		<view style="height: 60rpx;line-height: 60rpx;background-color: rgba(255,0,0,0.1);">
			{{address}}
		</view>
		<scroll-view scroll-x="true" class="white-space mt-1 scroll-title" :scroll-into-view="scrollinto">
			<view v-for="(item,index) in navbars" :key="index" :id="'tab'+index" class="d-inline-block mx-2"
				:class="currentIndex==index?'active':''" @click="changeTab(index)">{{item.name}}</view>
		</scroll-view>
		<swiper :style="'height:'+scrollH" :current="currentIndex" @change="changeIndex">
			<swiper-item v-for="(newItem,i) in newsItems" :key="i" :style="'height:'+scrollH">

				<!-- 	<view style="height:300px ;">
							{{JSON.stringify(news.type)}}
						</view> -->
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="'height:'+scrollH" @scrolltolower="scrolltolower(i)">
						<template v-if="newItem.list.length>0">
							<block v-for="(news,j) in newItem.list" :key="j">
								<!-- 轮播图 -->
								<template v-if="news.type=='swiper'">
									<swiper-banner :swipers="news.data"></swiper-banner>
								</template>
								<!-- 金刚区-->
								<template v-else-if="news.type=='indexnavs'">
									<fast-navs :pagees="pagees"></fast-navs>
								</template>
								<template v-else-if="news.type=='threeAdv'">
									<!-- 瓷片区 -->
									<divider></divider>
									<three-adv :news="news.data"></three-adv>
								</template>
								<template v-else-if="news.type=='oneAdv'">
									<one-adv :title="news.data.title" :cover="news.data.cover"></one-adv>
								</template>
								<template v-else-if="news.type=='list'">
									<common-list :news="news.data"></common-list>
								</template>
							</block>
							<view class="text-center text-muted my-1">{{newItem.loadmore}}</view>
						</template>
						<template v-else-if="newsItems[i].forward=='before'">
							<view class="text-center text-dark">
								加载中…
							</view>
						</template>
						<template v-else>
							<view class="text-center text-dark">
								暂无数据
							</view>
						</template>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
		<sk-index v-if="isSkShow"></sk-index>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');
	import {
		getHome,
		getPage
	} from '../../api/index.js'
	export default {
		data() {
			return {
				isSkShow:true,
				address: "",
				qqmapsdk: "",
				scrollH: 0,
				scrollinto: '',
				currentIndex: 0,
				navbars: [],
				newsItems: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
					success: (e) => {
						// #ifdef APP-PLUS||H5
						this.scrollH = e.windowHeight - uni.upx2px(98) + 'px'
						// #endif
						// #ifdef MP
						this.scrollH = e.windowHeight - uni.upx2px(266) + 'px'
						// #endif
					}
				}),
				this.qqmapsdk = new QQMapWX({
					key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC'
				});
				uni.getLocation({
					type: 'gcj02',
					highAccuracyExpireTime: 100,
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						// #ifdef MP
						this.qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res2) => {
								console.log('221432423');
								console.log(res2);
								this.address = res2.result.address
							}
						})
						// #endif
						// #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
				
					}
				});
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url:'/pages/search/search'
			})
		},
		//原生跳转到搜索页
		onNavigationBarButtonTap(e) {
			console.log(e);
		},
		mounted() {
			this.gethome()
			

		},
		computed: {
			pagees() {
				let pages = [] //[[1,2,3,4,5,6,7,8],[9,10]] 
				let index = this.currentIndex
				if (this.newsItems[index]) {
					this.newsItems[index].list.map(item => {
						if (item.type == 'indexnavs') {
							let indexnavs = Object.values(item.data)
							indexnavs.forEach((v, i) => {
								let page = Math.floor(i / 8)
								if (!pages[page]) {
									pages[page] = []
								}
								pages[page].push(v)
							})
						}
					})
				}
				return pages
			}
		},
		methods: {
			//请求数据
			gethome() {
				getHome().then(res => {
					console.log('res=>', res);
					this.navbars = res.data.category
					var arr = []
					for (var i = 0; i < this.navbars.length; i++) {
						let forward = i == 0 ? 'after' : 'before'
						var obj = {
							list: [],
							loadmore: '加载更多…',
							forward: forward
						}
						if (i == 0) {
							obj.list = res.data.data
						}
						arr.push(obj)
					}
					this.newsItems = arr
					this.isSkShow = false
					console.log('newsItems=>', this.newsItems);
				})
			},
			//小程序跳转到搜索页
			goSearch() {
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			//扫码
			scanCode() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			//切换标题
			changeTab(index) {
				if (this.currentIndex == index) return
				this.currentIndex = index
				this.scrollinto = 'tab' + index
				if (this.currentIndex < 6) {
					this.scrollinto = 'tab0'
				}
			},
			//当swiper切换时触发
			changeIndex(e) {
				console.log(e);
				this.currentIndex = e.detail.current
				if (this.newsItems[this.currentIndex].forward == 'after') {
					return;
				} else {
					this.getpage()
				}

			},
			//请求不同标题下页面数据
			getpage(callback) {
				let index = this.currentIndex
				let id = this.navbars[index].id
				let obj = this.newsItems[index]
				let page = Math.ceil(obj.list.length / 5) + 1
				console.log('page=>', page);
				obj.forward = 'before'
				getPage(id, page).then(res => {
					console.log(res);
					let data = res.data
					if (data) {
						obj.list = [...obj.list, ...data]
						obj.loadmore = data.length < 5 ? '没有更多了…' : '加载更多…'
					}
					obj.forward = 'after'
				})
				if (typeof callback == 'function') {
					callback()
				}
			},
			//下拉加载更多
			scrolltolower(index) {
				//加载更多…  加载中…  没有更多了…
				if (this.newsItems[index].loadmore != '加载更多…') {
					return;
				} else {
					this.newsItems[index].loadmore = '加载中…'
					this.getpage(() => {
						uni.showToast({
							title: '加载成功'
						})
					})
				}


			}
		}
	}
</script>

<style>
	.search-title {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #eee;
		border-radius: 44rpx;
		text-indent: 30rpx;
	}

	.scroll-title {
		height: 88rpx;
		line-height: 60rpx;
	}
</style>