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>
目录
相关文章
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
344 0
|
6月前
|
存储 JavaScript 小程序
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
124 0
|
6月前
|
前端开发 JavaScript 数据挖掘
浅谈游戏地图中位置实时更新的技术方案
浅谈游戏地图中位置实时更新的技术方案
123 1
|
移动开发 小程序 JavaScript
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新)
229 1
|
6月前
|
小程序 前端开发
微信小程序实现位置变动图表
微信小程序实现位置变动图表
|
数据可视化 5G 云计算
干货:实时渲染和离线渲染的区别?实时云渲染又是什么?
常见的渲染类型有以下几种:实时渲染、离线渲染、实时云渲染、混合渲染。那么什么是实时渲染?实时渲染和离线渲染有哪些区别?各自有哪些典型应用场景...... 有没有人感觉知道了,但又没完全知道? 今天小编就尽量为大家用简单易懂的方式先解释下实时渲染、离线渲染、实时云渲染这3个概念。
干货:实时渲染和离线渲染的区别?实时云渲染又是什么?
|
JSON 前端开发 定位技术
Echarts地图坐标geoCoordMap后台生成动态获取的解决方案
Echarts地图坐标geoCoordMap后台生成动态获取的解决方案
184 0
|
JSON 前端开发 程序员
Echarts地图坐标geoCoordMap后台生成动态获取的解决方案2
Echarts地图坐标geoCoordMap后台生成动态获取的解决方案2
226 0
|
小程序 API 定位技术
微信小程序【关于地址信息的接入以及自动选择当前位置】
微信小程序【关于地址信息的接入以及自动选择当前位置】
335 0
|
小程序 JavaScript 定位技术
微信小程序地图实现标记多个位置
微信小程序地图实现标记多个位置
298 0