uniapp开发APP和微信小程序——使用高德实现定位

在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位。

在dcloud社区里大佬已经给出了实现方法（链接：uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DCloud问答），

百度的其他博客也是照搬的这里面的内容，可是，如果对于一个新手来说，具体的步骤还是不会操作，所以我来一步步的操作一下。

首先在高德开放平台，注册账号并且申请相关的 key 等信息；

首先在高德开放平台注册账号，如图创建应用。

然后分别申请安卓和微信小程序的key

安卓key：key名称可以随便填，服务平台选择Android平台，安全码SHA1我这里使用的是uniapp的公共测试证书（SHA1：BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7），PackageName填程序打包的包名

，申请完安卓key后，再申请微信小程序的key

然后下载它的微信小程序版 SDK：微信小程序 SDK。

新建一个 uni-app 项目，新建一个 common 目录，然后将前面下载得到的 amap-wx.js 的文件复制进去。

Tip：这个 common 目录只是举例，并非强制约定。但是，不要放在 static 目录下。

新建的 uni-app 默认会有一个 index 页，在 index.vue 中，引入高德小程序 SDK。

import amap from '../../common/amap-wx.js';  
export default {  
}

在 onLoad 中初始化一个高德小程序 SDK 的实例对象。

import amap from '../../common/amap-wx.js';  
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: '这里填写高德开放平台上申请的key'  
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        });  
    }  
}

利用高德小程序 SDK，获取当前位置地址信息。

import amap from '../../common/amap-wx.js';  
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: '高德key',  
            addressName: '',  
            weather: {  
                hasData: false,  
                data: []  
            }  
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        });  
    },  
    methods: {  
        getRegeo() {  
            uni.showLoading({  
                title: '获取信息中'  
            });  
            this.amapPlugin.getRegeo({  
                success: (data) => {  
                    console.log(data)  
                    this.addressName = data[0].name;  
                    uni.hideLoading();  
                }  
            });  
        }  
    }  
}

到此，微信小程序就可以获得位置了。

APP还需要在manifest.json中配置key

在这里可能还需要ios的key，就再去申请一个ios的key

安全码Bundle ID就填打包时的（下图所示）

打包后在APP上也可以获得位置信息了。