实战｜uniapp模拟微信实现发送位置消息，办理滚动页面舆图层级辩说

媒介

在即时通讯应用中，固然发送位置信息不是核心功能，但在特定场景下，这个功能仍然非常有用。
本文将先容如安在 uniapp 中实现位置信息的发送和展示，特别是在碰到舆图层级题目时的办理方案。
   以下内容均基于 uniapp 打包 App 端。

  通例办理方案带来的题目

在 uniapp 中，通常利用map组件来展示位置信息。但在打包为 App 端后，map组件的层级题目会导致它无法随着谈天页面滚动。就像下图的情况：

在这个方案中，有在文档上看到形貌说可以采取cover-view去办理在滚动组件中map层级过高的题目，但是颠末折腾应该还是对 uniapp 的相识不敷，没有办理层级过高的题目，因此换了下面的方案，也算是一个新的路子，盼望可以大概对看到这篇文档的你有所资助。
采取的方案

静态舆图方案

静态舆图方案的核心实在是用一张舆图的静态图片，更换了map组件，图片在scoll-list中不存在有层级过高的情况。而静态舆图的产生则是调用了舆图厂商所提供的静态舆图 api，在调用天生的静态舆图 api 时通过 url 传参的情势，将要展示的坐标经纬度传入，而且根据舆图厂商规则去传入其他扩展参数，从而到达预期想要天生的静态舆图效果。在本次我的实现中，我采取的是高德舆图的 api，其他如百度，腾讯雷同。
在高德静态舆图 api 中，你可以除可传入经纬度坐标，也支持返回的图片宽高，这里我贴一下详细官方文档地点，供各人详细研究静态舆图的利用：
高德静态舆图
功能实现

在接下来的篇幅内里，我将形貌一下，我在实现位置消息发送，消息页面展示位置气泡，以及点击消息气泡展示详细位置的实现过程，以及碰到的题目。
   在实现之前我们须要先在 uniApp 官网查察干系获取位置、选择位置、查察位置干系 api 的用法以及留意事项。
  

• uni.getLocation(获取位置)
  
• uni.chooseLocation(选择位置)
  
• uni.openLocation（查察位置）
  

第一步：实现发送位置

1)在mainifest.json文件下的App模块设置中勾选Geolocation（定位）

在定位中你可以选择体系定位大概是高德、百度等厂商的体系定位，这里为了延时，就直接选择体系定位。

2)点击发送位置获取体系定位授权

1. getLocation() {
2.       uni.getLocation({
3.         // type: 'wgs84',
4.         type: 'gcj02',
5.         success: (res) => {
6.           this.location = { ...res };
7.           console.log('当前位置：' + JSON.stringify(res));
8.         },
9.         fail: (err) => {
10.           console.error(err);
11.           // 这里可以处理权限被拒绝的情况
12.           if (err.errMsg === 'getLocation:fail auth deny') {
13.             // 引导用户打开权限设置
14.             uni.showModal({
15.               title: '提示',
16.               content: '需要获取您的位置信息，请到设置中打开相关权限',
17.               success: function (res) {
18.                 if (res.confirm) {
19.                   // 打开设置页面
20.                   uni.openSetting({
21.                     success: function (res) {
22.                       console.log(res.authSetting);
23.                       // res.authSetting = { "scope.userLocation": true } 表示已获得权限
24.                     },
25.                   });
26.                 }
27.               },
28.             });
29.           }
30.         },
31.       });
32.     },

复制代码

3)授权后调用uni.chooseLocation打开进入舆图选择位置。

此 api 在调用拉起时会发现进入的页面并不会给你一个舆图页面以及地点遐想，这是由于还须要在App权限模块中勾选Maps而Maps下有高德、百度、Google三家，而我这里就选高德舆图。

用户名的获取：

appkey_android key 的获取：
你须要在高德开放平台举行利用：
   进入高德控制台→应用管理→我的应用→创建新应用→添加Key→选择服务平台→获取SHA1码
  在填写一系列指定信息后，即可乐成创建。

假如你不知道SHA1码的获取，在下文中也会提到对应 Mac 平台获取的方式。
appkey_ios key 的获取：
同安卓步调只不外 iOS 不须要获取SHA1码，仅须要填写Bundle ID

完成以上步调后，重新打包自界说调试基座，确保将舆图原生插件依靠进去。
重新调用uni.chooseLocation后发现正常的展示了当下前位置，以及附近位置，选择完成后即可获取勾选的位置经纬度，位置名称，详细位置。

4) 发送位置消息

通过调用环信 uniApp api 发送位置消息来实现位置消息的发送

1. let option = {
2.   chatType: 'singleChat',
3.   type: 'loc',
4.   to: 'username',
5.   addr: this.location.address || '未知地址',
6.   buildingName: this.location.name || '未知建筑名称',
7.   lat: this.location.latitude,
8.   lng: this.location.longitude,
9. };
10. let msg = WebIM.message.create(option);
11. conn
12.   .send(msg)
13.   .then((res) => {
14.     console.log('Send message success', res);
15.   })
16.   .catch((e) => {
17.     console.log('Send message fail', e);
18.   });

复制代码

该 api 干系文档：
环信-发送位置消息
第二步：渲染展示位置消息气泡

1) 创建高德舆图 Web 平台 Key

静态舆图的利用须要创建 Web 平台的 Key，该 Key 会在拼接静态舆图 URL 时用到。

1. https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=750*300&markers=mid,,A:116.481485,39.990464&key=<用户的key>

复制代码

2) 拿经纬度置换可用的静态舆图资源图片

通过剖析发送大概吸收到的位置消息中的经纬度，调用高德舆图静态舆图 api，从而获取对应坐标的静态舆图。
   msgBody 即为环信收发位置消息的消息体。

1.     <img
2.       class="map_image_container"
3.       :src="`${AMAP_API_URL}${location}&zoom=10&size=400*200&scale=1&markers=mid,,A:${msgBody.lng},${msgBody.lat}&key=${AMAP_KEY}`"
4.     />
6. const AMAP_KEY = 'YOUR KEY';
7. const AMAP_API_URL = 'https://restapi.amap.com/v3/staticmap?';
8. const location = () => {
9.       return `location=${this.msgBody.lng},${this.msgBody.lat}`;
10.     },

复制代码

3）展示位置名以及详细地点

1.    <view class="location_msg_container" @click="openMap">
2.     <u--text
3.       :lines="1"
4.       :text="msgBody.buildingName ? msgBody.buildingName : '未知建筑'"
5.     ></u--text>
6.     <u--text
7.       :lines="1"
8.       :text="msgBody.addr ? msgBody.addr : '未知建筑'"
9.     ></u--text>
10.     <img
11.       class="map_image_container"
12.       :src="`${AMAP_API_URL}${location}&zoom=10&size=400*200&scale=1&markers=mid,,A:${msgBody.lng},${msgBody.lat}&key=${AMAP_KEY}`"
13.     />
14.   </view>

复制代码

第三步：点击位置消息气泡跳转详细位置舆图

1. openMap() {
2.       uni.openLocation({
3.         latitude: this.msgBody.lat,
4.         longitude: this.msgBody.lng,
5.         success: function () {
6.           console.log('success');
7.         },
8.       });

复制代码

干系效果展示

选择位置

点击选择位置

位置消息在消息列表的渲染效果

点击消息气泡查察详细位置

碰到的题目

题目一： getLocation失败，不支持gcj02坐标系。

1. {
2.     "errMsg": "getLocation:fail not support gcj02",
3.     "errCode": 18,
4.     "code": 18
5. }

复制代码

办理方式：举行了重新自界说调试基座。
题目二：舆图依靠模块未勾选导致的题目。

办理方式：在mainifest.json勾选舆图依靠模块，并重新打包自界说调试基座。
题目三：获取安卓高德 key SHA1 指纹。

为了获取安卓高德 key SHA1 指纹的获取

以 Mac 举例
1. 下载并安装 Java JDK

假如你还没有安装 Java JDK，可以通过以下步调安装：

• 打开 Oracle JDK 下载页面。
  
• 下载并安装得当你利用体系的 JDK。
  

2. 利用 keytool 工具获取 SHA1

keytool 工具是 Java 开辟工具包 (JDK) 中的一个下令行工具，用于管理密钥和证书。
假设你的 APK 文件名为 your_app.apk 而且存放在 ~/Downloads 目次中。

• 打开终端（Terminal）。
  
• 运行以下下令来提取 APK 包中的证书信息：
  

1. keytool -printcert -jarfile ~/Downloads/your_app.apk

复制代码

该下令会表现 APK 包的证书详细信息，包罗 SHA1 指纹。
示例输出

2.   Signature:
4.   Owner: CN=Your Name, OU=Your Organization, O=Your Company, L=Your City, ST=Your State, C=Your Country
5.   Issuer: CN=Your Name, OU=Your Organization, O=Your Company, L=Your City, ST=Your State, C=Your Country
6.   Serial number: 1234567890abcdef
7.   Valid from: Mon Jul 01 00:00:00 PDT 2021 until: Wed Jun 26 00:00:00 PDT 2041
8.   Certificate fingerprints:
9.        SHA1:  AA:BB:CC:DD:EE:FF:00:11:22:33:44:55:66:77:88:99:00:AA:BB:CC
10.        SHA256: AA:BB:CC:DD:EE:FF:00:11:22:33:44:55:66:77:88:99:00:AA:BB:CC:DD:EE:FF:00:11:22:33:44:55:66:77:88:99
11.        Signature algorithm name: SHA256withRSA
12.        Version: 3

复制代码

从输出中找到 Certificate fingerprints 下的 SHA1 指纹，即为 APK 包的 SHA1 安全码。
留意事项

• 确保你利用的 keytool 是 Java JDK 中的工具，默认情况下，keytool 会安装在 /usr/bin 目次中。
  
• 假如你在利用下令时碰到题目，可以实行指定 keytool 的完备路径，比方 /Library/Java/JavaVirtualMachines/jdk-15.0.1.jdk/Contents/Home/bin/keytool，详细路径根据你安装的 JDK 版本而定。
  

通过上述步调，你可以在 Mac 上获取 UniApp 云打包的 APK 包的 SHA1 安全码。
题目四：uni.chooseLocation无法定位的题目。

该题目在安卓以及 iOS 均有发现，触发时机是在调用选择舆图时高频复现，如今暂不确定是否是uni.chooseLocationapi 的异步调用而产生的 bug，在产生时，选择位置界面无法展示装备地点位置。
办理方案：

经测试该方案使该情况有所好转，但是偶尔还是能复现无法定位的情况，假如你知道缘故因由以及办理方案可以批评区留言。
调用uni.chooseLocation时将通过uni.getLocation经纬度坐标一并传入，代码如下：

1.     chooseLocationData() {
2.       uni.chooseLocation({
3.       //获取到的经纬度
4.         latitude: this.location.latitude,
5.         longitude: this.location.longitude,
6.         success: (res) => {
7.           console.log('位置名称：' + res.name);
8.           console.log('详细地址：' + res.address);
9.           console.log('纬度：' + res.latitude);
10.           console.log('经度：' + res.longitude);
11.           this.location = Object.assign(this.location, { ...res });
12.         },
13.         fail: (err) => {
14.           console.error(err);
15.         },
16.       });
17.     },

复制代码

干系文档：

• 注册环信即时通讯IM：https://console.easemob.com/user/register
  
• 如实战中有任何题目，欢迎到IMGeek社区沟通讨论。