uniapp仿美团小程序左上角的位置定位

uniapp仿美团小程序左上角的位置定位

---

前言

uniapp坑比较多，我想你看了之后能减少点坑

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、概括

本文章主要是介绍仿照美团外卖左上角的定位，进而做的一个微信小程序的定位，方法仅供参考

二、使用步骤

1.引入库

我们在使用中啊，我们需要定位到具体的位置信息，那么我们就要用到腾讯位置服务腾讯位置服务（https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview）
在这里我们需要设置两个东西，一个是申请密钥，另一个是引入下载微信小程序JavaScriptSDK，请自行打开页面引入，

代码如下（示例）：

2.读入数据

1. 设置一个组件，把微信小程序JavaScriptSDK引入到里面

import qqmapsdk from "@/utils/qqmap-wx-jssdk.js"

位置自己修改。
2.设置自己的代码，请求道自己的位置信息，设置引入位置信息，引入位置定位，获取位置相应坐标位

获取位置信息，经纬度
getlos() {
				const that = this
		
				uni.getLocation({
					type: 'wgs84',
					// geocode: true,
					success: function(res) {
						console.log(res.longitude)
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getflo()
					}

				})
			},
			getflo() {
				const that = this
				console.log(that.longitude)
				const QQMapWX = new qqmapsdk({
					key: 'IOJBZ-VOT3Q-2G55W-G5FJ2-7UIKH-6JBGU'
				});
				// 解析地址

				QQMapWX.reverseGeocoder({
					options: {
						latitude: that.latitude,
						longitude: that.longitude
					},
					coord_type: 1,
					get_poi: 1,
					poi_options: "policy=2;radius=1000;page_size=20;page_index=1",
					success: (res) => {
						//定位成功
						that.poisList = res.result.pois
						that.list = res.result.address_reference.landmark_l2.title

						console.log(res)
					},
					fail: function(res) {
						// console.log(res)
						uni.showToast({
							title: '定位失败',
							duration: 2000,
							icon: "none",
						})
					},
				})


			},

注意：1.我们在获取位置时候会出现定位失败图，这时候我们是因为没有加权限信息加上即可

2.这里强调一点我在当时引入经纬度时候，赋值到data中，但data结果总是空的，所以我打印一下，发现传值赋值之后有个刷新特效，所以我把getflo()的函数调用放在了获取之后调用，这样解决了好多bug，有好方法可以替换
3.设置搜索框，让其有个搜索定位功能
html

<view>
		<!-- 搜索框 -->
		<view class='search'>
			<view class='search_box'>
				<!-- <image src='../../../images/search.png' class='search_image'></image> -->
				<input type='text' class='search_input' placeholder='搜索地点' placeholder-class='input_placeholder' @input="bindInputSchools"
				 v-model="bindInputSchool"></input>
			</view>
		</view>
		<view class="devs">
			<view class="flt">{{list}}</view>
			<view class="fls" @click='getlos'>重新定位</view>
		</view>
		<view class='btn1' bindtap='BackTap2'>
			附近地址推荐
		</view>
		<view class='btn2' v-for="item in poisList">
			<view @click="mapse(item.title)">{{item.title}}</view>
			<!-- <view class='hint'>{{item.address}}</view> -->
		</view>
	</view>

js

bindInputSchools(e) {
				const QQMapWX = new qqmapsdk({
					key: 'IOJBZ-VOT3Q-2G55W-G5FJ2-7UIKH-6JBGU'
				});
				console.log(e)
				var timer = false;
				var val = e.detail.value;
				let vm = this
				clearTimeout(timer);
				timer = setTimeout(function() {
					if (val.length > 0) {
						QQMapWX.search({
							keyword: val, //搜索关键词
							location: {
								latitude: vm.latitude,
								longitude: vm.longitude,
							},

							success: function(res) {
								console.log(res, '搜索位置');
								vm.poisList = res.data
							},
						});
					} else {
						vm.poisList = []
						vm.getLocal(vm.latitude, vm.longitude)
					}

				}, 500);
			},

效果图

---