/Distance

一次PWA的尝试

Primary LanguageJavaScript

Distance

个人娱乐用。技术元素如下:

  • PWA(Progressive Web Apps),可添加至桌面或Android主屏。
  • 地图,接入百度地图API

功能:

  • 添加参考点
    • 在左侧搜索框搜索,单击选择地图上的搜索结果点
    • 直接地图上右键或长按(移动端)选点
  • 相对位置信息显示
    • 右侧信息栏显示距离活动(Active)参考点的距离和方向
    • 信息栏内信息会随着参考点和当前位置信息实时更新
  • 参考点管理
    • 右侧下拉菜单展示所有参考点信息
    • 菜单项单击可跳转到参考点所在位置
    • 可以通过右侧操作按钮切换参考点状态
    • 参考点支持直接在地图上拖拽
  • 下方按钮可以暂停/重启当前位置更新
  • 地图会记住最后一次当前位置信息,再刷新或再次进入时会自动聚焦到附近
  • 可以添加到首屏(PC/Andorid中)
  • 网络状况提醒(online/offline事件)
  • 离线也可打开(目前只有提示页)

做完才发现,这个应用并不大适合PWA。-_-