uniapp实时获取当前位置

简介: uniapp实时获取当前位置

首先我们需要先下载一个插件(高德地图官网插件)

(插件主要作用是获取当前地理定位或者是自身的位置,并且可以返回名称name)

结合uniapp官网的示例一起使用,

在script中开头写

import amap from '../../common/amap-wx.130.js'

点击事件部分

getWarpweft() {
        const that = this;
        that.po_tips = '定位中...';
    // 
    // 
        uni.getLocation({
          type: 'wgs84', // 或 'gcj02'
          success(res) {
            console.log('定位成功', res);
            that.po_tips = '重新定位';
            const latitude = res.latitude;
            const longitude = res.longitude;
            // 调用逆地理编码方法获取地名
            var myAmapFun = new amap.AMapWX({key:'ddb2a654bf6582459b81243b3bc45548'});
            myAmapFun.getRegeo({
              location:longitude +','+latitude,
              success: function(data){
                // console.log(data[0],99);
            // that.position = data[0].regeocodeData.addressComponent.city;
             that.position = data[0].regeocodeData.addressComponent;
                console.log(data[0].regeocodeData.addressComponent.city,99);
                //成功回调
              },
              fail: function(info){
                //失败回调
                console.log(info)
              }
            })
          },
          fail(err) {
            console.log('定位失败', err);
            that.po_tips = '定位失败';
            // 处理定位失败的情况,例如提示用户或执行其他操作
          },
        });
      }

data部分

po_tips: '重新定位',
position: '', //定位获取的位置

 

html部分

<view class="dingwei">
              <text>当前位置地名:{{ currentAddress }}</text>
          <view class="dingwei_city">
            <view class="dingwei_city_one" @tap="back_city(position,true)">
              {{position?position.city:'定位失败'}}
            </view>
            <view class="bold blue fmiddle" @click="getWarpweft"> 
              <text>{{po_tips}}</text>
            </view>
          </view>
        </view>
目录
相关文章
|
编译器 定位技术 API
|
定位技术 开发者
uni-app获取地理位置
uni-app获取地理位置
894 0
|
移动开发 Android开发 HTML5
uniapp视频播放功能
uniapp视频播放功能
1679 0
uniApp获取当前位置经纬度
uniApp获取当前位置经纬度
836 0
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
1898 0
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3341 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
开发框架 JSON 定位技术
uniapp中map组件动态加载marks标记
uniapp中map组件动态加载marks标记
1636 5
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用