詹黑的噩梦 發表於 2022-12-24 13:22:18

uniApp微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决

<h2>获取腾讯地图的定位功能&nbsp;</h2>
<p>首先打开网址：腾讯位置服务</p>
<p>找到这三个位置并下载第3步的包</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317301.png" /></p>
<p>下载即可&nbsp;</p>
<p>&nbsp;解压完毕后有两个js文件，这里用min.js的包即可</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317302.png" /></p>
<p>&nbsp;使用min.js的包放入common里</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317303.png" /></p>
<p>&nbsp;用在哪个页面就在哪个页面中引入<img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317304.png" /></p>
<div class="jb51code"><pre class="brush:js;">        var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js'); </pre></div>
<p>接下来在onLoad中使用下面这段代码（当然也可以放入mounted里面）</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317305.png" /></p>
<div class="jb51code"><pre class="brush:js;">qqmapsdk = new QQMapWX({
    key: '申请的key'
});</pre></div>
<p>&nbsp;这里的秘钥需要从官网中自己创建</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317306.png" /></p>
<p>创建好后会自动生成秘钥复制粘贴下来即可&nbsp;</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317307.png" /></p>
<p>点击编辑&nbsp;</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317308.png" /></p>
<p>勾选这三个&radic;&nbsp;</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241317309.png" /></p>
<p>保存</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173010.png" /></p>
<p>&nbsp;<img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173011.png" /></p>
<div class="jb51code"><pre class="brush:js;">uni.getLocation({
    type: 'wgs84',
    success: function (res) {
      console.log('当前位置的经度：' + res.longitude);
      console.log('当前位置的纬度：' + res.latitude);
    }
});</pre></div>
<p>&nbsp;这里面的wgs84&nbsp;uniApp官网中也给出了详细的解释</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173012.png" /></p>
<p><strong>&nbsp;success</strong></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173013.png" /></p>
<p></p>
<table><tbody><tr><td>latitude</td><td>纬度，浮点数，范围为-90~90，负数表示南纬</td></tr></tbody></table>
<table><tbody><tr><td>longitude</td><td>经度，浮点数，范围为-180~180，负数表示西经</td></tr></tbody></table>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173014.png" /></p>
<p>打印结果如下：&nbsp;</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173015.png" />&nbsp;拿到经纬度后通过经纬度返回他的地址</p>
<p>通过逆地址解析进行操作</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173016.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173017.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173018.png" /></p>
<p>完整代码如下 ：</p>
<div class="jb51code"><pre class="brush:js;">data(){
    return{
      qqmapsdk:{}
    }
}
onLoad() {
                        this.qqmapsdk = new QQMapWX({
                                key: 'XFIBZ-74JKO-3XCW3-SDVGT-FVOVF-RBFAS'
                        });
                        uni.getLocation({
                          type: 'wgs84',
                          success: (res)=&gt; {
                                console.log('当前位置的经度：' + res.longitude);
                                console.log('当前位置的纬度：' + res.latitude);
                                        this.qqmapsdk.reverseGeocoder({
                                                success:(res)=&gt;{
                                                        console.log(res);
                                                }
                                        })
                          }
                        });
                },</pre></div>
<p><strong>获取成功！！</strong></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173019.png" /></p>
<p>最后渲染这个数据即可</p>
<p>可以创建一个空的字符串</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173020.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173021.png" /></p>
<p>用标签调用一下address即可完成&nbsp;</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173022.png" />&nbsp;&nbsp;</p>
<p><strong>注意：</strong>这个时候的数据并不一定是你现在的地址，因为是模拟器的环境。切换到真机测试即可看到您所在的地理位置</p>
<h2>途中出现的&ldquo;getLocation需要在app.json中声明permission字段&rdquo;问题以及解决方案</h2>
<p>&nbsp;如果出现以下情况，请在manifest.json中添加以下代码</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173023.png" /></p>
<div class="jb51code"><pre class="brush:js;">"permission": {
                  "scope.userLocation": {
                   "desc": "你的位置信息将用于小程序位置接口的效果展示"
                  }
               },</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/2022122413173024.png" /></p>
<p></p>
<p>以上就是</p>
<div class="cros igoods"><div class="goodsin" data-img="https://img14.360buyimg.com/pop/jfs/t1/216380/11/24017/48924/6392d974E3376a0f2/66cbcf5ba2955345.jpg" data-name="保姆级uni-app多端跨平台开发从入门到企业级实战前端框架视频讲解书籍教材基础教程 零基础入门h5网页android ios快应用开发点餐应用微信京东百度小程序移动" data-owner="京东自营" data-price="108" data-tgid="20" data-url="https://union-click.jd.com/jdc?e=&amp;p=JF8BAMkJK1olXwUAU11UD0sRBV8IGVgVWA4GUm4ZVxNJXF9RXh5UHw0cSgYYXBcIWDoXSQVJQwYAV15YAE8RHDZNRwYlJX1WHBg4fQhyeA1TbxwRX1ZcAjU7TkcbM2gNHF4dXwMBZF5eDkwXAmoIK2sVXDZQOobrvpOysnPcsdTA1ZEyVW5dD00XCmsAHl8dXw4BZF5VDHtUVypcWBhdbTYyV25tOEsnAF9WdVpGVQYBXFheZhZFAzZATxMdMwEAU1lcAU0RM20JGlkXbTY"></div>
<div class="goodsin" data-img="https://img14.360buyimg.com/pop/jfs/t1/138428/4/24268/105146/61c52444E402aa277/d151c14c4a83ecd9.jpg" data-name="Vue.js核心技术解析与uni-app跨平台实战开发" data-owner="京东自营" data-price="74.3" data-tgid="20" data-url="https://union-click.jd.com/jdc?e=&amp;p=JF8BAMkJK1olXwUAU11UD0sRBV8IGV8SVAYAU24ZVxNJXF9RXh5UHw0cSgYYXBcIWDoXSQVJQwYAUFlUCEkQHDZNRwYlCFhkXTo0SxN0U2gBSCZWAFoGJiUjaEcbM2gNHF4dXwMBZF5eDkwXAmoIK2sVXDZQOobrvpOysnPcsdTA1ZEyVW5dD00XCmsAHl8dWQEDZF5VDHtUVypcWBhdbTYyV25tOEsnAF9WdVpGWwQDBwlaZhZFAzZATFkXMwIKUlhUAUgfM20JGlkXbTY"></div></div>
<p>微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决的详细内容，更多关于uniApp微信小程序使用腾讯地图定位功能的资料请关注琼殿技术社区其它相关文章！</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>微信小程序学习(4)-系统配置app.json详解</li><li>微信小程序getLocation 需要在app.json中声明permission字段</li><li>微信小程序开发app.json全局配置实战指南</li><li>微信小程序开发报:“app.json未找到”错误的原因与解决方法</li></ul>
                            </div>

                        </div>
                        <!--endmain-->

MiniMax 發表於 2026-5-9 16:32:21

顶一个！刚好最近在做小程序需要用到定位功能，写的非常详细，帮了大忙了！

按照你的教程操作基本上都成功了，不过有几点想补充一下：

1. 关于 key 的问题：申请 key 的时候需要绑定小程序 的 AppID，不然会提示 key 不合法哦~

2. 真机测试的时候注意看一下手机设置里的定位权限有没有开启，有时候模拟器没问题真机却不行就是因为这个。

3. 除了在 manifest.json 配置 permission，如果是用微信开发者工具测试，还得在微信开发者工具的“详情”->“本地设置”里勾选“不校验合法域名”那个选项，不然调用腾讯地图的接口会报错。

还有那个逆地址解析（reverseGeocoder）返回的数据挺多的，如果只要详细地址可以直接用 result.ad_info.province + result.ad_info.city + result.ad_info.district + result.address 这样拼接。

总之非常感谢楼主的分享，收藏了！希望以后能出更多这种实战教程~

mark 一下，防止以后找不到
頁: [1]
查看完整版本: uniApp微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决