背景
当你刚上大学的时候,要想不迷失校园,除了依靠不怎么可靠的路边标识外,总会收到那么一张卡通绘制的校园地图:
这种静态图片可以让我们快速地了解到所需的地理位置信息,但使用和思考过后,会发现以下问题:
- 地理位置信息粒度高,而同一个地点通常具有多个服务功能和别名。
- 地理位置信息变更导致地图信息过时。一旦服务网点迁移或更名,需要重绘地图,带来一定的延迟和信息滞后。
- 入口较深。存储在手机上的地图并不是那么好找,尤其是随着时间的推移。
- 无法准确的定位当前所处位置,需要寻找参照物,这是静态地图致命的缺点。
- 缺乏更为详细的地点介绍,只能在有限的画面里堆积内容。
为此,我设计了一款校园导览应用,用当下流行的微信小程序结合云开发能力,低成本高效能地解决了以上问题。此外,我还根据对市面上的同类应用进行设计上的研究,在界面和交互设计上做功夫。下面我会进行简短的介绍。
南苑导览
南苑导览是一款由学生独立开发的以地图为载体,提供中山大学南方学院(南苑)具体地点的位置信息、导航、校园历史及文化介绍的小程序。旨在解决校园导航标识不到位、地图形式低效单一、信息设计不够好等问题,为来南苑新人和游客提供更加完美的出行体验。
仅需修改地图配置文件,即可适配任意场景(校园、景区)的小程序个性化地图定制。
技术栈:原生小程序 + TypeScript + gulp + vantUI + 云开发能力
2019 微信小程序高校大赛 · 华南赛区二等奖
南苑导览 · 开发
- config 配置
├─ src
├─── config
├───── index.ts // 入口
├───── cloud.ts // 云开发相关配置
├───── info.ts // 应用介绍信息
├───── markerStyle.ts // 地图marker样式
├───── panorama.ts // 第三方全景地图配置(个人类型无webview权限,默认关闭)
└───── secret.ts // 腾讯地图key等敏感信息(可选)
- 使用云数据库
// markers表 数据格式
{
_id: "5ce8fe1c29c7a8581bc1e989", // id,云数据库录入upsert更新用
type: "生活服务", // 场景名称
icon: "shfw", // marker默认图标,为场景名称拼音缩写
scale: 15.0, // 场景在地图上的缩放值,可选。已废弃,用includePoints代替
position: 0, // 指定在各个场景中的排列顺序
data: [ // 该场景下的地点markers
{
name: "孙中山铜像", // 地点名称
short_name: "铜像", // 名称缩写
desc: "中山铜像...", // 描述信息
logo: "tx", // 地点logo,缩写拼音, 如作各院系logo展示
icon: "tx@2", // 自定义marker图标,“@”后数字为图标相较于默认图标的缩放值
images: 3, // 图片数量,作云存储拼接路径用(cloud://cloudRoot/1教/n.jpg)
panorama: 0, // 全景场景id
latitude: "23.635875", // 经度
longitude