uni-app 写H5 小程序 使用腾讯地图获取地理位置

uni-app 写公众号 小程序 使用腾讯地图获取地理位置

1.首先需要在腾讯地图里面申请key

2.下载微信小程序JavaScriptSDK，微信小程序 JavaScriptSDK v1.1   JavaScriptSDK v1.2

3.引入js文件

4.在需要的页面引入

5. 小程序代码

getLocation(){
    let that = this
	uni.getLocation({
		type: 'gcj02',
		success: function (res) {
				console.log(res)
				that.longitude = res.longitude
				that.latitude = res.latitude
				let qqmapsdk = new QQMapWX({
					key:'申请的key'
				})
				qqmapsdk.reverseGeocoder({
					location:{
						 longitude:res.longitude,
						 latitude:res.latitude
					},
					success:function(data){
						 console.log('data',data)
						 that.address = data.result.address
					}
				})
	    },
		fail: function (error) {
			console.log('执行',error)
		}
	});
},

6.H5代码    

    注意：H5 端获取定位信息，要求部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议，如果想在页面查看效果的话，可以使用火狐浏览器看返回的信息

data(){
    return{
        qqMap: new QQMapWX({key: '申请的key',vm: this}),
    }
},
methods:{
    getLocation(){
        let that = this
	    uni.getLocation({
		    type: 'gcj02',
		    success: function (res) {
				console.log(res)
				that.longitude = res.longitude
				that.latitude = res.latitude
				that.qqMap.reverseGeocoder({
					location: {
						longitude:res.longitude,
						latitude:res.latitude
					},
					success: function(data){
						console.log(data)
						that.address = data.result.address
					}
				})
	        },
		    fail: function (error) {
			    console.log('执行',error)
		    }
	    });
    }

}

这就完成啦~