html5 制作地图当前定位箭头的方法示例_html5教程技巧

来源:脚本之家  责任编辑:小易  

chrome firefox safira opera 这些都支持,Ie9以上也是支持。其它的少用到没有试过www.zgxue.com防采集请勿采集本网。

功能点 获取当前定位 时时显示当前设备方向

能用,可以实现的,HTML5可以使用手机的GPS信息,利用百度等地图的开放API就可以了。HTML5中可以通过IP,WIFI信息,GPS,来实现地理定位,当然相关精度也是有所不同,所以如果要精确导航就得使用

重点

h5每次打开时,只是单纯获取的设备方向是无法正确朝向的。因为每次打开后地图自身也受设备朝向影响。

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来

所以需要再获取罗盘方向进行校正。

百度地图提供了专业的API,测试浏览器:ie11定位成功率100%,Safari定位成功率97%。其它浏览器暂时不行,HTML5获取不了地理位置信息。

以小程序获取设备、罗盘方向,h5渲染定位箭头为例,

跟例子没关系,是最近GOOGLE被封的原因。

相关公式:

在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能。navigator.geolocation.

// 跟新箭头的方向应该根据设备与罗盘方向的差值const newAngle = 360 - ( deviceAngle - compassAngle )

HTML5+JQM即可实现参考方法:e5a48de588b67a64313333353331621.先去通过百度拾取坐标系统获得点位的坐标http://api.map.baidu.com/lbsapi/getpoint/index.html2.在网页的<head>中插入百度API引用脚本。<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>3.在网页的</body>之后</html>之前插入地图显示代码4.设置显示地图的div的id为“dituContent”,即添加 id="dituContent" 由于jqm的div的高度都是根据内容自由放大的,所以为了地图能正常显示,还需要增加一个高度值,一般情况600px就可以注意事项:1. var point = new BMap.Point(120.524011,36.395728); 这是定义中心店坐标2. map.centerAndZoom(point,15); 这个据我调试 应该是控制地图比例缩放的3. window.setTimeout(function(){map.panTo(point);}, 1000);注意了 一般的demo是没有这个东西滴,所以呢当跳转到地图的页面时候 是不会显示你定位的中心点的 但是由于我的聪明和机智 各种装孙子求助大神 才得知了这个大神不削一顾的属性 :设定地图加载后1秒调至中心点 。。最后强调下 低调 一定要低调。。。4. function createIcon(json){ var icon = new BMap.Icon("images/map_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) return icon; } 这里就是创建一个icon5. var markerArr = [{title:"西程村",content:"青岛市即墨市蓝鳌路 电话:123123123213",point:"120.524011|36.395728",isOpen:0,icon:{w:32,h:32,l:0,t:0,x:6,lb:5}}]; 这里呢 就是设置定位的信息, 636f7079e79fa5e9819331333337396166 html5实现地图上定位导航路线方法如下:  1.先通过百度拾取坐标系统获得点位的坐标。  http://api.map.baidu.com/lbsapi/getpoint/index.html  2.在网页的<head>中插入百度API引用脚本。  <script type="text/javascript" src="http://api.map.baidu.com/api  key=&v=1.1&services=true"></script>  3.在网页的</body>之后</html>之前插入地图显示代码。  4.设置显示地图的div的id为“dituContent”,即添加 id="dituContent"  由于jqm的div的高度都是根据内容自由放大的,所以为了地图能正常显示,还需要  增加一个高度值,一般情况600px就可以,完成,html5可以实现内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 基于html5+tracking.js实现刷脸支付功能
  • html中meta标签及keywords
  • 详解移动端h5页面根据屏幕适配的四种方案
  • html5移动端自适应布局的实现
  • html里显示pdf、word、xls、ppt的方法示例
  • html5 直播疯狂点赞动画实现代码 附源码
  • html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
  • canvas 基础之图像处理的使用
  • 用canvas显示验证码的实现
  • html5给汉字加拼音收起展开组件的实现代码
  • html5实现地图上定位导航路线
  • 哪些浏览器支持html5地图定位
  • HTML5怎么用高德地图API返回当前位置的经纬度
  • 怎样使用HTML5地理位置定位功能
  • html5的地理定位功能getCurrentPosition还能用吗
  • 如何使用HTML5地理位置定位功能
  • 百度地图怎样在手机上精确定位js html5
  • html5使用地理定位时总是无法获取位置?
  • 怎么知道html5定位的位置是否准确
  • 什么是地形图?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5地图当前定位基于html5+tracking.js实现刷脸支付功能详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html5给汉字加拼音收起展开组件的实现代码html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved