惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
爱范儿
爱范儿
博客园_首页
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
大猫的无限游戏
大猫的无限游戏
月光博客
月光博客
IT之家
IT之家
WordPress大学
WordPress大学
N
Netflix TechBlog - Medium
Microsoft Azure Blog
Microsoft Azure Blog
The GitHub Blog
The GitHub Blog
C
Check Point Blog
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - Franky
G
Google Developers Blog
V
V2EX
雷峰网
雷峰网
美团技术团队
博客园 - 【当耐特】
人人都是产品经理
人人都是产品经理
有赞技术团队
有赞技术团队
MongoDB | Blog
MongoDB | Blog
V
Visual Studio Blog
J
Java Code Geeks

博客园 - 燕闪硕

EF Core 批量操作实战:3 种方案对比与性能测试 Python 开发 Windows 客户端:Web 技术做界面的 5 款核心工具 Python描述器(Descriptor)深度解析:OOP底层核心机制实操指南 使用pyenv-win管理多版本Python Python字符串编码及正则表达式使用 重装系统后遇到Git Authentication failed 错误 [转帖]如何准确高效的获取数据库新插入数据的主键id [转帖]SQL中partition关键字的使用 利用分布类防止EF更新模型丢失验证信息 列表样式切换 CSS3 简易照片墙 HTML5表单增强 HTML5 元素拖放 HTML 5 全局属性 微软build 2015 写个程序登陆58同城 工厂方法 简单工厂 System.Data.SQLite兼容32位和64位问题
利用canvas在手机页面实现景区导航的一点思路
燕闪硕 · 2019-01-18 · via 博客园 - 燕闪硕

需要做一个景区游览导航,因为要用定制的导游图,而且是山区,百度地图也没有提供更详细的景区内的路线,所以要自己写一个。

导游图是这样的,导游图跟实际路线是有区别的,毕竟我们也不是搞测绘的。实际景点有疏有密,为了效果好,画图时分布均匀了。

在这张图上能够显示游客具体位置,并且点击景点能够有语音或视频的介绍。能够在手机实现移动、缩放等操作。

 1.获取手机屏幕宽高,设置Canvas标签的宽高。

 2.绘制地图、绘制人。

 3.获取所在位置,计算景点与人的距离,选出距离最小的景点。在此点上绘制人。人在景区走动时手机上的地图就能够显示所在位置。

 4.点击景点弹出说明文字和语音播放。需要监听canvas标签的touchend事件。获取点击的位置,与景点位置做比较,判断是否点击景点。

 5.地图移动,需要监听canvas的touchmove事件。

    获取元素内有一个手指,执行移动方法。

    元素内有两个手指,执行地图缩放方法

写的比较粗糙,只提供一个思路吧

效果页