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

最新推荐文章于 2024-08-09 14:29:28 发布

原创

最新推荐文章于 2024-08-09 14:29:28 发布 · 3.7k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #定位 #小程序

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

文章目录

前言
一、概括
二、使用步骤
- 1.引入库
- 2.读入数据

前言

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: