先看運(yùn)行結(jié)果：
流程：
1、在edge網(wǎng)頁搜索騰訊位置服務(wù)
搜索后點(diǎn)擊這里
已經(jīng)有賬號(hào)的就進(jìn)行登錄，沒有賬號(hào)的進(jìn)行注冊(cè)即可
點(diǎn)擊控制臺(tái)：
進(jìn)去后點(diǎn)擊成員管理---->我的應(yīng)用---->創(chuàng)建應(yīng)用
輸入相應(yīng)的參數(shù)應(yīng)用名稱（隨便寫）和應(yīng)用類型更具你的項(xiàng)目類型進(jìn)行選擇我選擇了出行
選擇好后點(diǎn)擊創(chuàng)建：
創(chuàng)建好后點(diǎn)擊添加key：
打開微信小程序開發(fā)工具：
這樣就獲取到了key：
2、下載騰訊小程序JavaScriptJDK點(diǎn)擊即可跳轉(zhuǎn)
微信小程序JavaScript SDK | 騰訊位置服務(wù) (qq.com)
下載其中一個(gè)都可以
解壓后放在common目錄下皆可，如果沒有common路面自己生成即可。
3、安全域名設(shè)計(jì)
在微信小程序后臺(tái)小程序 (qq.com)??????
添加request合法域名，添加apis.map.qq.com
4、配置manifest.json文件
"permission" : {
"scope.userLocation" : {
"desc" : "為了您更好的體驗(yàn)，請(qǐng)確認(rèn)獲取您的位置"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation", "chooseAddress" ]5、引用代碼演示
我這里吧方法引入到mixins中
//獲取用戶實(shí)時(shí)位置
import QQMapWX from "../../common/qqmap-wx-jssdk.js"
//獲取用戶實(shí)時(shí)位置
import QQMapWX from "../../common/qqmap-wx-jssdk.js"
export const showMixin ={
data(){
return{
show: true
}
},
methods:{
showto(){
this.show=!this.show
console.log('this.show',this.show)
uni.navigateBack({
delta:1
})
},
async getLocationInfo() {
// this.show = !this.show
return new Promise((resolve) => {
let location = {
longitude: 0,
latitude: 0,
province: "",
city: "",
area: "",
street: "",
address: "",
};
uni.getLocation({
type: "gcj02",
success(res) {
location.longitude = res.longitude;
location.latitude = res.latitude;
const qqmapsdk = new QQMapWX({
key: 'ANDBZ-VEM6T-IPIXG-VEWUH-XJYGS-N2BPT'
});
qqmapsdk.reverseGeocoder({
location,
success(response) {
let info = response.result;
console.log(info);
location.province = info.address_component.province;
location.city = info.address_component.city;
location.area = info.address_component.district;
location.street = info.address_component.street;
location.address = info.address;
resolve(location);
}
});
},
fail(err) {
console.log(err)
}
})
})
}
}
}顯示：
引入：
生命周期調(diào)用：
代碼直接使用即可：
<template>
<view class="site">
<view class="map">
<uni-search-bar class="uni-mt-10" radius="100" placeholder="搜索城市/區(qū)縣/地點(diǎn)" clearButton="none"
cancelButton="none" @confirm="search" />
</view>
<view class="current">
<view style="display: flex; font-size: 28rpx; line-height: 44rpx;">
<uni-icons type="location" size="20"></uni-icons>
<txte v-if="position !== null">當(dāng)前位置：{{position}}</txte>
</view>
<view style="display: flex; color: #4687e1; font-size: 28rpx;" @click="showto">
<image src="../../../static/images/tabbar/locations.png" mode="aspectFill"
style="width: 35rpx; height: 35rpx; margin-right: 10rpx;"></image>
<text>刷新定位</text>
</view>
</view>
<view class="chosen">
<view v-for="(item,index) in list" :key="index" class="box" @click="selects(index)"
:class="{'active': activeindex === index}">
{{item.name}}
<view class="line" v-if="activeindex === index"></view>
</view>
</view>
<view class="area">
<view class="area-box" v-for="(item,index) in box" :key="index" @click="city(index)"
:class="{'active': activeindexs === index}">
{{item.name}}
</view>
</view>
<view class="ess">
<view v-if="activeindexs !== -1" class="area-box" v-for="(item,index) in boxs" :key="index"
@click="citys(index)" :class="{'active': activeindextwo === index}">
{{item.name}}
</view>
</view>
<uni-popup ref="popup" background-color="#fff">
<view style="width: 300rpx; height: 300rpx;">
<uni-loading></uni-loading>
</view>
</uni-popup>
</view>
</template>
<script>
// import QQMapWX from "../../../common/qqmap-wx-jssdk.js"
import {
showMixin
} from '../../../shopro/mixins/site.js'
export default {
mixins: [showMixin],
data() {
return {
position: null,
activeindex: 0,
activeindexs: -1,
activeindextwo: -1,
list: [{
name: '貴州省'
}],
box: [{
name: '貴陽市'
},
{
name: '安順市'
},
{
name: '遵義市'
},
{
name: '畢節(jié)市'
},
{
name: '黔東南'
},
{
name: '黔東南'
},
{
name: '黔東南'
},
{
name: '黔東南'
}
],
boxs: [{
name: '花溪區(qū)'
},
{
name: '觀山湖區(qū)'
},
{
name: '南明區(qū)'
},
{
name: '云巖區(qū)'
},
{
name: '白云區(qū)'
},
{
name: '清鎮(zhèn)'
}
],
}
},
async mounted() {
const location = await this.getLocationInfo();
console.log('location', location)
// that.position = location.province + location.city
let position = location.province + location.city + location.area
console.log('position', position)
this.position = position
},
methods: {
citys(index) {
this.activeindextwo = index
},
city(index) {
this.activeindexs = index
},
selects(index) {
this.activeindex = index
uni.showLoading({
title:'加載中',
mask: true
})
// this.$refs.popup.open('center')
}
},
// change(e){
// console.log('當(dāng)前模式：' + e.type + ',狀態(tài)：' + e.show);
// }
}
</script>
<style scoped>
.area-box {
width: 130rpx;
height: 80rpx;
background-color: #fff;
text-align: center;
line-height: 80rpx;
margin-top: 20rpx;
margin-right: 10rpx;
margin-left: 10rpx;
border-radius: 20rpx;
}
.ess {
width: 100vw;
height: 300rpx;
/* background-color: #c9c9c9; */
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: row wrap;
align-content: flex-start;
overflow-y: scroll;
}
.area {
width: 100vw;
height: 300rpx;
/* background-color: aqua; */
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-flow: row wrap;
align-content: flex-start;
overflow-y: scroll;
}
.line {
position: absolute;
bottom: 10rpx;
width: 70%;
height: 5rpx;
background-color: brown;
border-radius: 50rpx;
left: 0;
right: 0;
margin: auto;
}
.box {
width: 130rpx;
height: 100%;
/* background-color: antiquewhite; */
text-align: center;
line-height: 80rpx;
}
.active {
font-weight: bold;
position: relative;
}
.chosen {
width: 100vw;
height: 80rpx;
padding: 0 20rpx;
background: #f8f8f8;
}
.current {
display: flex;
align-items: center;
justify-content: space-between;
width: 100vw;
height: 100rpx;
padding: 0 30rpx;
}
.map {
width: 100vw;
height: 100rpx;
}
.site {
width: 100vw;
height: 100vh;
background-color: #fff;
}
</style>運(yùn)行結(jié)果：文章來源：http://www.zghlxwxcb.cn/news/detail-858045.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-858045.html
到了這里，關(guān)于uniapp小程序：使用uni.getLocation通過騰訊地圖獲取相關(guān)地址信息詳情（超詳細(xì)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
