04/122017

小程序应该如何正确地使用地图组件呢

来源 :原创 所属分类 :新闻 围观次数

  了解小程序的人都知道, 小程序带有一个地图(map)组件。

  利用它,你可以在小程序中调用一个功能完整的地图,让小程序里所展示的地点更直观、更精确。

  那么,小程序应该如何正确地使用地图组件呢?


  开发设计

  从小程序前端开发角度来说:

  WXML 是微信官方提供的一套标记语言

  WXSS 为 CSS 子集

  至于脚本逻辑语言,则是前端工程师熟知的 JavaScript

  即便在小程序中 JavaScript DOM API 无法使用,但整体而言,开发小程序前端部分所需的技术栈还是我们所熟知的那套东西。

  1. 数据表设计

  使用知晓云后台数据模块,可以轻松创建业务所需的数据表。

  这里重点列出两张数据表,以及表内关键字段。在后台成功创建数据表后,下载最新版知晓云 SDK ,使用获取到的 tableID,就可以对数据表执行操作。

  首先是商户信息表 merchant,它的 tableID 为 12。

  该表关键字段如下:

  然后就是停车记录表 parking_ticket,它的 tableID 为 13。

  关键字段如下:


  2. 前端设计

  布局设计

  合理布局解决地图组件层级高于 WebView 层级问题:我们尝试使用 Android 设备,开启开发者选项中 Show layout bounds(显示布局格子)选项,再进入智慧园区小程序。

  我们所看到的界面如下图所示。

  Android 开发者选项中 show layout bounds 是一个很常用的功能,开启后可以知道界面上哪部分是用 Native 实现、哪部分是用 Hybrid web 实现。

  从截图中可以得出,小程序的 map 组件是使用 Native 来实现的,它并不是一个 WebView 容器,而原生组件的特性是它总会覆盖在 WebView 组件之上。

  所以对于导航页的布局,我们按照如下代码来设计:

  利用 page 页面对 map 组件采用绝对定位、高度自适应的方法,实现 WebView 组件不被地图组件遮盖、地图组件又可随 WebView 组件尺寸,动态改变高度。

  此外,当用户点击地图上标记的停车位置时,需求是要以弹窗形式询问用户下一步操作。

  由于开发上无法实现在原生的 map 组件上弹出 WebView 蒙层,结合产品特点,我们当时选用了一种比较简单可操作的实现。

  即,当需要在 map 组件之上弹出蒙层时:

  隐藏 map 组件和相关的不需要的 WebView 元素(比如顶部的分类条和地步的商户列表)。

  使用一张以园区中心点定位的地图图片来作为背景元素。

  在该背景图片上覆盖 WebView 弹窗。

  等用户操作结束后再隐藏图片,恢复 map 和相关组件的展示。

  其实,解决该问题的更好的办法,是通过使用小程序的画布 Canvas 组件来实现,因为画布也是使用 Native 组件来实现的。

  具体方式是:先使用 Canvas 绘制一个蒙层,再在 Canvas 蒙层上绘制 Canvas 弹窗。

  需要注意的是,弹窗中的小车图标,无法使用网络图片绘制,请将该图片放在本地资源文件夹中。感兴趣的同学可以 clone 本项目,自己动手实验。

  解决 controls 布局垂直方向高度问题:controls 是 map 组件的属性,它允许开发者在 map 组件上使用本地资源图片来渲染地图控件。

  下图中使用红色选中框选中的三个按钮即为 controls,分别代表:

  用户位置:点击后触发更新用户位置,将用户位置设置为 map longitude 和 latitude 值。

  T.I.T 动态:点击后跳转到动态页。

  停车找车:点击后显示弹窗,询问用户是记录停车还是导航到停车地点。

  controls 属性列表(部分引自官方文档):

  position 有 4 个属性,分别为 left,top,width,height。也就是说,开发者要想在界面上安排一个控件的位置,只能通过设置这 4 个属性来实现。而这 4 个属性的单位都是像素(px)。

  我们的做法是,以 iPhone 6(逻辑像素 375×667)作为基准设备,来进行不同尺寸屏幕适配。

  代码如下图所示,可以实现在不同设备上都有比较好的展示。

  数据获取

  商户信息获取:数据获取部分主要介绍商户经地理位置的采集。商户经纬度采集我们采用了高德开放平台,输入商户名,获取其坐标点。

  例如,在输入框输入「爱范儿科技」的结果如下图:

  商户的其他信息,也是交由商户完善,再使用 CSV 格式,导入到前述 merchant 数据表中。

  用户位置获取:用户进入导航页后会请求获取用户地理位置。获得用户授权后,会使用 wx.getLocation API 获取用户位置。

  注意,该 API 默认 type 取值为 WGS84。为了在地图上显示在正确的位置,则 type 需要设为 gcj02 ,也就是我们平常所说的「火星坐标系」(官方称「地形图非线性保密处理算法」)。

  关于 WGS-84 和 GCJ-02,我们需要了解的是:GPS 全球定位系统的经纬度坐标使用标准 WGS-84,换到使用 GCJ-02 的中国网路图上时,会造成距离在 500m 左右不等的显著偏移。

  更多信息,可以在网络上搜寻有关「中华人民共和国测绘限制」的资料。

  两点间距离获取:两点间距离使用腾讯地图的距离计算 API 得出。调用距离获取和线路导航功能接口,都需要事先获取调用 key 才可以使用。

  导航路线点获取:由于商户的地理位置信息是使用高德地图采集到的。同时,高德地图也推出了自己的微信小程序 SDK,所以路线规划我们引入了高德地图的小程序版 SDK 来求取。

  将获取到的路线数组,设置为 map 组件 polyline 的数据源即可。


  3. 地图组件其余重要属性


  4. 路由规划

  在小程序中,所有页面的路由全部由框架进行管理。

  而小程序有 5 层页面栈的限制,即如果在页面切换过程中,页面栈内页面数量超过 5,小程序将无法再进行跳转,或者发生一些意外行为。

  所以我们在开发小程序时,一定要规划好小程序的页面栈,或结合产品进行跳转优化,或者从根源上精简需求,以期开发出更实用更健壮的小程序。

  下图展示了这个小程序的页面栈的流动。红色标线代表的路径为 BECG,经过 G 到达 6 - 导航页时,页面栈达到可容纳的最大页面数。

  此时,在地图页只允许进行两种操作:

  第一种是按左上角,上一层「商户详情」页面,在详情页则只能继续返回上一层或者再次进入导航页,不会出现爆栈的情况。

  第二种方法,是通过判断页面栈中是否存在地图页。存在的话,则返导航页显示回到地图控件,用户点击后将直接调用 wx.navigateBack 加 delta 参数,直接跳回多级到地图页。

  另需注意的是,并不是所有导航 API 都可以携带参数,设计路由时也要同时考虑参数传递问题。

  要了解更多,请参考小程序官方文档中的「页面路由」部分及「导航 API」部分。


注 册

完善信息

  • 姓名
  • 电话
  • 邮箱
  • QQ
  • 地址
  • 微信