uniapp H5 获取当前定位

    /** 需要安装 vue-baidu-map   vue-jsonp插件 **/

    // vue-baidu-map 初始化  

   mapReady({ BMap, map }) {
            this.initPoint()
            this.idDefaultVal = 1
        },

    // uniapp 自带获取经纬度 不准确需要转换

     /* lon 经度 114.360243   lat纬度 30.560407  初始化*/
        async initPoint() {
            let _this = this
            await uni.getLocation({
                isHighAccuracy: true,
                success: function (res) {
                    _this.loading = false
                    _this.pointTransition(res.longitude, res.latitude)
                },
            })
        },
    

   /* 百度地图 坐标转换,不同地图坐标都不一样,需要转换*/
        async pointTransition(lng, lat) {
            let url = 'https://api.map.baidu.com/geoconv/v1/?'
            await this.$jsonp(url, {
                coords: lat + ',' + lng,
                ak: '自己的ak',
                from: 3,
                to: 3,
                output: 'jsonp',
            })
                .then(res => {
                    // x lon y lat
                    this.getUserLocation(res.result[0].y, res.result[0].x)
                })
                .catch(err => {
                    console.log(err)
                })
        },


        /* 百度 逆地址解析,获取精确定位*/
        getUserLocation(lat, lng) {
            let ak = '自己的ak'
            let url = `https://api.map.baidu.com/reverse_geocoding/v3/?ak=${ak}&output=json&coordtype=wgs84ll&location=${lng},${lat}`
            this.$jsonp(url)
                .then(res => {
                    this.keyword = res.result.formatted_address
                    this.markerPoint.lng = res.result.location.lng
                    this.markerPoint.lat = res.result.location.lat
                })
                .catch(err => {
                    console.log(err)
                })
        },



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp 是一款基于Vue.js开发的跨平台应用开发框架,可以让我们使用Vue.js开发一次,同时发布到多个平台,包括iOS、Android和H5等。 要在Uniapp中使用天地图获取当前定位,我们可以按照以下步骤进行: 第一步,安装相关插件。 在Uniapp项目的根目录下,通过命令行运行以下命令来安装`tmt`插件: ``` npm install tmt -S ``` 第二步,配置天地图API。 在`main.js`文件中,引入并配置天地图的API密钥。我们可以从天地图官网获取到API密钥,然后在`main.js`中添加以下代码: ```javascript import TMT from 'tmt'; Vue.use(TMT, { ak: '你的天地图API密钥' }); ``` 第三步,获取当前定位。 我们可以在需要获取定位信息的页面中,使用以下代码来获取当前定位信息: ```javascript export default { data() { return { location: null }; }, methods: { getLocation() { this.$tmt.getLocation().then(res => { this.location = res; console.log(this.location); }).catch(error => { console.error('获取定位失败:', error); }); } }, mounted() { this.getLocation(); } } ``` 在上述代码中,我们使用了`$tmt`来调用插件提供的方法`getLocation()`来获取当前定位信息。获取成功后,定位信息将存储在`location`变量中。 以上就是使用Uniapp获取当前定位的简要步骤。通过安装插件、配置API密钥和调用相关方法,我们就可以在Uniapp中轻松地获取当前定位信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值