uniApp 小程序 高德地图 获取当前位置_前端微信小程序高德地图获取位置信息及图片

uniApp 小程序 高德地图 获取当前位置

• • @[TOC](uniApp 小程序 高德地图 获取当前位置)
• 前言
• 一、前往高德平台准备账号？
• 二、获取高德地图的keys
• • 1.keys的生成
• 三、下载高德 [微信小程序插件](https://lbs.amap.com/api/wx/download)
• 四.代码实现
• • • 1.uniApp 环境 配置 跟着图片一步步来即可
    • 2.代码实现
• 总结

前言

提示：准备需要的材料：

1. 准备高德账号，高德平台官网
2. 准备微信公众平台账号，微信公众平
3. 获取自己小程序的Appid
4. 高德地图的keys

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前往高德平台准备账号？

提示：进入到官网后如图所示，有账号直接登录没有注册即可

二、获取高德地图的keys

1.keys的生成

1. 进入应用展示页
   

2. 创建应用名称
   

3. 添加key
   

4. 添加成功后
   

走到这一步 高德keys就生成了

三、下载高德 微信小程序插件

`提示：期初我以为是错的，饶了一会，这里面大胆的尝试不行重新开始`
1

下载下来后引进去就可以使用的

四.代码实现

1.uniApp 环境 配置 跟着图片一步步来即可

2.代码实现

    import amap from '../../common/amap-wx.js'; //引入高德微信小程序版sdk
    onLoad(){
     that.amapPlugin = new amap.AMapWX({
                key: that.gdKeys
            })
     }
     methods: {
      // 获取用户位置授权方法
            getRegeo() {
                const _this = this;
                uni.showLoading({
                    title: '获取信息中'
                });
                _this.amapPlugin.getRegeo({

                    success: (data) => {
                        console.log(999);
                        console.table(data[0], '当前定位')
                        _this.addressName = data[0].name;
                        uni.hideLoading();
                    },
                    fail: (err) => {
                        console.log(999, '》》》》》》》》》》》》》');
                        console.log(err)
                    }
                });
            },
         }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

总结

提示：到这里这个功能也就实现了。
要相信自己，每一步都是对的，不行的话重新来 加油