调用腾讯sdk将当前经纬度换算出省市区

获取效果

html页面


<view>  
    <button bindtap="getLocal" wx:if="{{isLocal}}" bindtap="getLocal">获取位置</button>
    <button open-type='openSetting' bindopensetting="handleSetting" wx:else>授权获取</button>
    <viwe>经度:{{longitude}}</viwe>  
    <view>纬度:{{latitude}}</view>  
    <viwe>省:{{province}}</viwe>  
    <view>市区:{{city}}</view>  
   
</view>

1.下载腾讯sdk的js文件 http://lbs.qq.com/qqmap_wx_jssdk/index.html

2.引入项目

var qqMap = require('../../lib/qqmap-wx-jssdk.js');
var qqmapsdk ;
Page({

    data: {
        isLocal: true,
        longitude: '',
        latitude: '',
        province: '',
        city: ''
    },
    onLoad: function (options) {
        qqmapsdk = new qqMap({
            key: 'CK6BZ-BTHCW-4IPRC-OZLAN-ZTITF-Y3FHA'
        });
    
       
    },
    getLocal(){
        let that = this;
        wx.getSetting({
            success: (res)=>{
                if (!res.authSetting['scope.userLocation']){
                    wx.authorize({
                        scope: 'scope.userLocation',
                        success: (res)=>{
                            that.showLocal();
                            that.setData({
                                isLocal: true
                            })
                        },
                        fail: (err)=>{
                            that.setData({
                                isLocal: false
                            })
                        }
                    })
                }else{
                    that.showLocal();
                }
            }
        })
    },
    showLocal(){
        var that = this;
        wx.getLocation({
            type: 'gcj02',
            success: function (res) {
                let latitude = res.latitude
                let longitude = res.longitude
                that.setData({
                    latitude, 
                    longitude
                })
                that.getMapCity(latitude, longitude)
            }
        })
     
    },
    handleSetting(){
        var that = this;
        wx.getSetting({
            success: (res)=>{
                if (!res.authSetting['scope.userLocation']){
                    console.log(1)
                    wx.showModal({
                        title: '提示',
                        content: '不授权将无法获得位置',
                        showCancel: false
                    })
                    that.setData({
                        isLocal: false
                    })
                }else{
                    wx.showModal({
                        title: '提示',
                        content: '位置授权成功',
                        showCancel: false
                    })
                    that.setData({
                        isLocal: true
                    })
                }
            }
        })
    },
    getMapCity(latitude, longitude){
        var that = this;
        qqmapsdk.reverseGeocoder({
            location: {
                latitude: latitude,
                longitude: longitude
            },
            success: function(res){
                console.log(res)
                let province = res.result.ad_info.province;
                let city = res.result.ad_info.city;
                that.setData({
                    province,
                    city
                })
            },
            fail: function(err){
                console.log(err)
            }
        })
    }

})

3.注意这个key是自己配置的,需要填写小程序appid和开启webserver服务,不然会不起作用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值