uniapp引入腾讯地图API实现地址解析

2,982 阅读1分钟

uniapp 引入腾讯地图APi解析地址

到今天为止一直没有接触过地图类的接口,所以今天练练手。就在我查看uniapp的API文档时,发现uni.getLocation()只能获取坐标的经纬度,不能转化为文字信息,所以要借助第三方.这里使用的腾讯地图。

1.首先要去腾讯地图申请密钥

这个比较简单一步步来就行 腾讯地图

2.下载微信小程序JavaScriptSDK

下载解压后把js文件引入到lib文件夹下,没有就建一个,不想建就放到static文件夹下也可以,

3.引入

腾讯地图上应该是原生的微信小程序,我们这里是UNI项目所以不一样.

    export default {
        data() {
            return {
            }
        },
        onLoad() {
            const qqmapsdk=new QQMapWX({
                key:'S6HBZ-6I6CP-Q2NDP-LABZW-2AS2O-VCFDU'
            })
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    console.log('当前位置的经度:' + res.longitude);
                    console.log('当前位置的纬度:' + res.latitude);
                    qqmapsdk.reverseGeocoder({
                        location:{
                            longitude:res.longitude,
                            latitude:res.latitude
                        },
                        success(res1){
                            console.log(res1)
                        },
                        fail(err1){
                            console.log(err1)
                        }

                    })
                }
            });
        },
    }
</script>   

这样引入后再调用腾讯地图的逆地址解析可以了。

写的比较粗糙望大家海涵