如果在小程序中需要使用定位相关的操作，前提是需要在小程序后台进行申请开通
申请页
但是这个"获取当前的地理位置、速度"的权限申请的通过率比较低，有的开发朋友可能会来来回回折腾十几次甚至几十次仍然未通过，这里提供一个快速申请通过的新思路，经过测试，"打开地图选择位置"接口权限的通过率远远高于"获取当前的地理位置、速度",而且"打开地图选择位置"同时也就获取了定位权限。所以可以曲线救国，多申请一个权限即可。
下面我将提供一个符合"打开地图选择位置"的页面，可以用来应付审核。
大概页面样式如下：
门店页
代码实现：
storeMap.wxml
<!--pages/storeMap/storeMap.wxml-->
<view class="main" style="height:{{mapHeight}}px;">
<map class="map" style="height:{{mapHeight}}px;" id="map" longitude="{{location.longitude}}" latitude="{{location.latitude}}" markers="{{markers}}" bindmarkertap="makertap" bindregionchange="regionchange" show-location>
<cover-view class="map-cover">
<cover-image class="map-cover-img" src="../../image/icon-location.png" catchtap="setUserLocation"></cover-image>
</cover-view>
<cover-view class="map-cover-5" catchtap="" wx-if="{{showChoosedStoreInfo}}" catchtap="aedDetail">
<cover-image class="choosed-store-info-img" src="https://img1.baidu.com/it/u=1070662155,3808653193&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=d42000cb6ada37face9f0ec85e48aa21"></cover-image>
<cover-image class="choosed-store-info-icon" src="../../image/current-location.png"></cover-image>
<cover-view class="choosed-store-info-detail">{{choosedStore.title}}</cover-view>
<cover-view class="choosed-store-info-button" catchtap="goThere">去店里</cover-view>
</cover-view>
</map>
</view>
storeMap.js
// pages/storeMap/storeMap.js
Page({
/**
* 页面的初始数据
*/
data: {
mapHeight: 0,
markers:[],
//默认的门店信息，如果有需要，可以从接口获取
markersDefault: [{
iconPath: "../../image/ic_store.png",
id: 1,
longitude: 121.523315,
latitude: 31.292936,
width:30,
height:30,
title: "杨浦区五角场店"
},{
iconPath: "../../image/ic_store.png",
id: 2,
longitude: 116.375381,
latitude: 40.025043,
width:30,
height:30,
title: "北京奥林匹克运动会店"
},{
iconPath: "../../image/ic_store.png",
id: 3,
longitude: 114.115030,
latitude: 22.537600,
width:30,
height:30,
title: "深圳万象城门店"
},{
iconPath: "../../image/ic_store.png",
id: 4,
longitude: 121.803829,
latitude: 31.136933,
width:30,
height:30,
title: "上海浦东国际机场店"
},{
iconPath: "../../image/ic_store.png",
id: 5,
longitude: 121.447288,
latitude: 31.146777,
width:30,
height:30,
title: "上海植物园店"
}
],
location:{},
showChoosedStoreInfo: false, // 显示选中的门店信息
choosedStore: {},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
//初始化屏幕信息
wx.getSystemInfo({
complete: (sysinfo) => {
console.log(sysinfo);
let height = sysinfo.windowHeight;
this.setData({
mapHeight: height
})
},
})
this.getLocationMethod();
},
/**
* 获取当前位置信息
*/
getLocationMethod: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
var lat = res.latitude;
var lon = res.longitude;
var selfMarker = {
iconPath: "../../image/current-location.png",
id: 0,
latitude: res.latitude,
longitude: res.longitude,
width: 30,
height: 30,
title: ' 我的当前位置 '
}
var tempList = [];
for (var i = 0; i < that.data.markersDefault.length; i++) {
tempList.push(that.data.markersDefault[i]);
}
tempList.push(selfMarker);
that.setData({
mapScale: '14',
location: {
longitude: res.longitude,
latitude: res.latitude
},
markers: tempList
})
//在获取当前位置信息之后，请求获取周围aed信息的接口，获取信息
// that.getStoreInfo(res);
},
fail: function (res) {
if (res.errMsg == 'getLocation:fail auth deny') {
wx.showModal({
title: '',
content: '需要授权定位才能使用此功能',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {
if (res.authSetting['scope.userLocation']) {
that.getLocationMethod();
}
}
})
}
}
})
}
},
complete: function (res) {},
})
},
makertap: function (e) {
var that = this;
var id = e.markerId;
if (id == 0){
that.setData({
showChoosedStoreInfo: false,
choosedStore : {}
})
}
for (var i = 0; i < that.data.markersDefault.length; i++) {
if(that.data.markersDefault[i].id == id){
that.setData({
showChoosedStoreInfo: true,
choosedStore : that.data.markersDefault[i]
})
}
}
},
goThere: function () {
wx.openLocation({
latitude: parseFloat(this.data.choosedStore.latitude),
longitude: parseFloat(this.data.choosedStore.longitude),
name: this.data.choosedStore.title,
scale: 28
})
},
/**
* 回到当前位置
*/
setUserLocation: function () {
console.log("回到当前位置");
var mapCtx = wx.createMapContext('map')
mapCtx.moveToLocation() //地图回到当前位置
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
storeMap.json
{
"usingComponents": {},
"navigationBarTitleText": "门店地图"
}
storeMap.wxss
/* pages/storeMap/storeMap.wxss */
.main {
width: 100%;
}
.map {
width: 100%;
position: absolute;
}
.map-cover {
width: 120rpx;
height: 160rpx;
border-radius: 5rpx;
position: absolute;
bottom: 300rpx;
right: 40rpx;
}
.map-cover-img {
width: 120rpx;
height: 120rpx;
border-radius: 20rpx;
overflow: hidden;
margin: 20rpx 0;
}
.map-cover-5 {
width: 80%;
height: 200rpx;
border-radius: 20rpx;
position: absolute;
bottom: 0rpx;
margin: 0 auto;
background: white;
margin: 10%;
}
.choosed-store-info-img {
width: 200rpx;
height: 160rpx;
float: left;
margin-left: 20rpx;
margin-top: 20rpx;
border-radius: 10rpx;
overflow: hidden;
}
.choosed-store-info-icon {
width: 40rpx;
height: 40rpx;
margin-top: 20rpx;
margin-left: 240rpx;
}
.choosed-store-info-detail {
height: 60rpx;
color: #666666;
font-size: 32rpx;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
margin-top: -40rpx;
margin-left: 300rpx;
margin-right: 10rpx;
word-break: break-all;
word-wrap: break-word;
white-space: pre-line;
}
.choosed-store-info-button {
height: 60rpx;
width: 240rpx;
font-size: 32rpx;
overflow: hidden;
line-height: 60rpx;
text-align: center;
color: #ffffff;
border-radius: 10rpx;
text-overflow: ellipsis;
word-break: keep-all;
margin-top: 20rpx;
margin-left: 300rpx;
margin-right: 10rpx;
word-break: break-all;
word-wrap: break-word;
white-space: pre-line;
background: #FF9525;
}
上面用到的icon比较简单，大家自行寻找替换即可。没其他多余的代码，只需要提供一个入口，跳转到storeMap页面即可，入口UI大家自行设计
storeMap() {
wx.navigateTo({
url: '../storeMap/storeMap',
})
},
完成以上，编译后截图，拿着截图去申请"打开地图选择位置"和"获取当前的地理位置、速度"权限，分分钟通过。亲测有效，3分钟审核通过！通过后，干掉以上代码即可
