位置: 编程技术 - 正文

javascript html5 canvas实现可拖动省份的中国地图

编辑:rootadmin

推荐整理分享javascript html5 canvas实现可拖动省份的中国地图,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下

1.数据获取画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中。新建省份数据数组轮询该数组,根据省份名称请求百度API获取坐标数据,并将数据以ajax方式放松给php

php得到数据后,解析数据并将数据存储到事先建好的数据库中

javascript html5 canvas实现可拖动省份的中国地图

2.画地图(base地图画在mapCanvas层)轮询省份数组,并以ajax方式请求该省份边界坐标,然后绘图

3.画移动连线(连线和移动的省份画在moveMapCanvas层)当在地图上拖动省份时,出现若干条连接移动的省份和原省份的直线

4.事件鼠标按下事件:当点击到地图上时,要做的事是,判断点击位置,将位置信息转化成经纬度,再通过百度API根据经纬度获得省份名称。

鼠标移动事件:根据点击的省份名,获得数据,并实时重绘移动层的省份

鼠标抬起事件:设置dragging为false,clear移动层。

小结:功能、原理都很简单,但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的,这样就可以在不同的层画不同的内容,方便维护和管理。

标签: javascript html5 canvas实现可拖动省份的中国地图

本文链接地址:https://www.jiuchutong.com/biancheng/377494.html 转载请保留说明!

上一篇:js仿百度登录页实现拖动窗口效果(仿百度首页html代码静态)

下一篇:JavaScript获取图片像素颜色并转换为box-shadow显示(js 获取图片大小)

  • 所得税没有计提怎么做账
  • 财税新闻稿
  • 土地使用税怎么征收标准
  • 自查补交以前年度增值税怎么做账
  • 固定资产处置收入怎么报税
  • 出口退税货物的进项税处理
  • 建筑公司包工包料账务处理
  • 子公司注销母公司投资损失企业所得税
  • 小规模30万免税是含税还是不含税
  • 卷烟批发环节消费税税率
  • 季报现金流量表是必报表吗
  • 收回已冲销的坏账分录
  • 企业与政府土地合作开发模式
  • 销售土地如何交增值税
  • 股东多交投资款处理
  • 工程项目劳务分包合同范本
  • 生产设备购买交付会计分录
  • 融资租赁首付款支付给供应商
  • 工地水电包公包料的细节
  • 销售使用固定资产账务怎么处理
  • 一年过去了,特朗普减税效果如何?
  • 新手会计怎么入门做账
  • 以前年度多计提了税金怎么办
  • 采用赊销方式销售货物的纳税义务发生时间
  • 事业单位采购管理办法
  • 什么是进项税和销项税
  • 开发票时已交的税金怎么做帐?
  • 苹果14出来13会下架吗
  • thinkphp 3.2.3 getshell
  • 产品分仓
  • 抵扣了的进项税可以冲销么
  • 高新企业研发费用比例
  • 应付税款法账务处理
  • window10电源选项
  • php自定义字段
  • 装修费用当月摊还是次月摊销
  • 经典动画动漫
  • 假如你知道这样是什么歌
  • 【创作赢红包】项目信息分析表
  • php 引用
  • ps中分辨率
  • 其他应收账款怎么做预算会计分录
  • 企业职工薪酬如何确定
  • 全年一次性奖金税率表2023
  • 金税盘 解锁
  • python多线程编程案例
  • 应付职工薪酬住房公积金怎么算
  • 电子发票开出后如何查看
  • 发票普票增票
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 三栏式明细账的借或贷怎么写
  • 制造费用期末要结转吗
  • 代扣代缴附加税怎么做账
  • 社保申报工伤怎么操作
  • 制单的基本要求是什么
  • 工业企业材料入库账务处理
  • mysql绿色版配置
  • mac系统怎么新建txt
  • macbookpro 钥匙串
  • xp系统如何禁止各种窗口弹出
  • xp系统删除用户账户怎么没有删除键
  • 系统密码设置
  • Win7 64位纯净版无法安装第三方主题的可行破解方法
  • win8引导文件
  • sql2000停止拒绝访问
  • win8什么时候发布
  • 在linux系统中创建文件的命令
  • Win10 Mobile RS1预览版14267.1004 修复Lumia 550充电问题
  • Ver、Vol、Ctty命令的使用教程
  • cocos2djs教程
  • css expression 隔行换色
  • 手机gpu过度绘制
  • shell脚本读取输入使用什么命令
  • js确认框选择取消时退出程序怎么设置
  • web.py 十分钟创建简易博客实现代码
  • 工会经费税务代收现状
  • 山东契税补贴政策2023年
  • 江苏常州税务局电话人工服务电话
  • 福建省国家税务局通用定额发票
  • 如果我是科学家我会发明什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设