前言

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 = thisuni.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 = thisconsole.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.poisthat.list = res.result.address_reference.landmark_l2.titleconsole.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>

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 = thisclearTimeout(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);},

效果图

uniapp仿美团小程序左上角的位置定位相关推荐

uniapp实现微信小程序用户实时位置定位并显示地图
目前,我们可以通过一些现成的api来实现此功能.下面我将介绍一下通过腾讯位置服务来实现此功能的具体操作流程. 1.在Hbuilder x中对项目进行权限开放进入到manifest.json文件中 2 ...
Uniapp中的小程序胶囊的位置
小程序有一个api可以获取胶囊的位置在哪里. let menuButtonInfo = uni.getMenuButtonBoundingClientRect()可以获取小程序胶囊的位置. 打印出来的 ...
uniapp生成小程序码仿商品小程序码跳转到商品详情
uniapp生成小程序码仿商品小程序码跳转到商品详情之前在网上找了下没有相关教程去生成小程序商品小程序码微信扫码直接跳转到小程序详情页面,今天我们就用uniapp来实现这个,其实微信小程序端方法大致 ...
uniapp微信小程序左上角返回按钮的监听
项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接 ...
美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本 ...
uniapp开发微信小程序-软考刷题小程序
记录一次基于uniapp的微信小程序开发前言计算机科学与技术辅修学士的课程设计最终决定做微信小程序(比较简单) 刷题小程序方向题库是软考内容开发语言前端uniapp开发后端django开 ...
计算机毕业设计Python+uniapp实验室考勤小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp实验室考勤小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ pytho ...
跳转饿了么小程序、跳转美团小程序、获取小程序路径、小程序生成小程序码不能选择第三方小程序、领红包功能开发（附源码）
先上成果和功能我做的是随机推荐美食的小程序,食物数据是存库的而且后续会开放给用户新增食物的权限,然后有些小功能就是跳转到饿了么小程序和美团小程序领外卖红包,技术使用uniapp,开发工具是HBuil ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...

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

文章目录

前言

一、概括

二、使用步骤

1.引入库

2.读入数据

uniapp仿美团小程序左上角的位置定位相关推荐

最新文章

热门文章