UNIAPP框架中获取当前定位信息

概述

1. 准备生成自己的Android证书。
2. 高德地图生成自己的key并配置mainfest.json。
3. 设置左上角图标并完成配置。
4. 页面中获取经纬度坐标。
5. 依据经纬度坐标获取位置信息。
6. 更新图标信息完成展示。

第一步：生成Android证书

参考资料

Android平台云端打包证书使用说明 https://ask.dcloud.net.cn/article/35985#server
Android平台签名证书(.keystore)生成指南 https://ask.dcloud.net.cn/article/35777

说明

• Android平台打包发布apk应用，需要使用数字证书（.keystore文件）进行签名，用于表明开发者身份。
• 证书是一个开发者的身份标志，对Android系统而言。使用一个证书签发的App，是属于同一个开发者的App。
• 举个极端的例子，如果你的应用证书泄露，那么别人可以用这个证书签名一个仿冒App，假如包名和你的包名也一样，就可以覆盖安装安卓手机上你之前的包。

步骤

1. 安装jdk，要求jdk8以上。
2. 使用keytool -genkey命令生成证书。

keytool -genkey -alias <testalias> -keyalg RSA -keysize 2048 -validity 36500 -keystore <test.keystore>

参数	说明
testalias	别名
validity	有效时间，单位天，36500是100年
test.keystore	keystore的文件名称

3. 流程参数步骤说明。
   

• 注意记住输入密库口令，这个是在hbuilder上打包的时候中的证书私钥密码。
• 最后一行，信息确认后输入y表示确认。

4. 查看SHA1值。

keytool -list -v -keystore <keystore文件>

响应如下：

• 注意其中的证书指纹：SHA1以后在高德生成key的时候需要使用。

第二步：高德地图生成自己的key

步骤

1. 注册后生成应用。
2. 生成应用后添加key。如下图：
   

• SHA1就是第一步，步骤4中生成的。
• PackageName就是在第一步中强调的包名。

3. 返回列表中第二栏就是key，注意保存。
4. 在manifest.json中配置key。

第三步：设置左上角图标

步骤

1. 生成带图标的ttl文件。
   • 使用iconfont，地址：https://www.iconfont.cn/。
   • 资源管理 -> 我的项目。
   • 选择图标，点击购物车，在右侧边栏中加入我的项目，然后下载至本地。
   • 注意编码。
2. 在pages.json对应页面上配置如下。

"pages": [ 
		{
			"path": "<页面Path>",
			"style": {
				"navigationBarTitleText": "",
				"app-plus": {
					"titleNView": {
						"buttons": [
							{
								"float":"left",
								"fontSize":"26px",//按钮上文字的大小，可以不写单位
								"width":"200",
								"fontSrc":"/static/iconfont1.ttf", //按钮的图片来源
								"text":"\u<字体编码>" //按钮的unicode代码
							}
						]
					}
				}
			}
		},

• 其中字体编码就是图中红框部分信息，本例中为e601。
  

第四-六步：页面中添加代码

说明

• 通过经纬度获取位置信息是使用易客API，地址是：https://yikeapi.com/index/geocode。

代码

uni.getLocation({ //uniapp获取定位。
    type: 'gcj02',
    success: (res) => {
        $http.request({
            url: `https://apia.yikeapi.com/geocode/?appid=45478629&appsecret=2hSMcDve&output=json&location=${res.longitude},${res.latitude}`, //使用易客API依据经纬度获取位置
            method: 'get',
        }).then((yikeRes) => {
            if (yikeRes.errcode === 0) {
                //解析结果获取城市信息
                let locationCity = yikeRes.regeocode.addressComponent.city;

                //刷新图标信息，添加城市信息。
                let page = pages[pages.length-1];
                let currentWebview = page.$getAppWebview();
                let titleObj = currentWebview.getStyle().titleNView;
                titleObj.buttons[1].text = "\ue662 " + locationCity;
                titleObj.buttons[1].fontSize = "17";
                currentWebview.setStyle({
                    titleNView:titleObj
                })
            }
        });
    },
    fail(err) {},
    complete(res) {}
});

问题

1. 在页面端测试时出现提示：page.$getAppWebview is not a function。
   答：这个方法只能在APP中使用，H5中不能使用。