`
月亮不懂夜的黑
  • 浏览: 155994 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5使用js确定用户坐标位置

    博客分类:
  • js
js 
阅读更多

最近在微信平台开发时,涉及到的问题。如何获取用户当前坐标位置。

微信用户坐标定位的实现方案

1、使用微信的共享位置,获取用户坐标。缺点:可能会需要用户手动点击获取位置,体验不好。优点:坐标比较精准 且用户可以手动调整位置;

2、使用html5的获取地理位置方案。缺点:坐标不太精准,且部分手机的微信浏览器不支持html5。优点:不需用户太多参与。

3、使用百度地图的ip定位。缺点:坐标差距太大,建议直接舍弃。

 

我这里采用了第二种方案,但是在获取过程种发现有时候判断不准确。

原来代码

var isSupportGeolLoc = navigator.geolocation ? true : false;
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		alert("你的手机不支持定位,现将转到自助设备列表页面!");
	        return;
	}

 在我的理解中,手机要么支持该服务,要么不支持。但是在实际的测试过程中发现,部分手机并不能正确提示,也不能有效获取对应的坐标。于是在网上搜索原因。原因如下

部分国行Android手机“阉割”了谷歌GMS服务包,导致HTML5的geolocation无法使用wifi和基站定位服务导致。

这个时候就会发现,假如你的手机支持浏览器定位但是你没有打开相关服务或者该服务对应的组件有问题,上面的代码均不能正确的显示当前坐标。重新修改代码为

$(window).load(function() {
	//是否支持定位的参数
	var isSupportGeolLoc = navigator.geolocation ? true : false;
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition,handleLocationError, 
		        {maximumAge:6000,timeout:5000, enableHighAccuracy:true}
		);
		//navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		alert("你的手机不支持定位,现将转到自助设备列表页面!");
	        return;
	}
});

function handleLocationError(error){
   switch(error.code){
	   case error.TIMEOUT:
		   alert("获取位置信息超时!");
	       break;
	  case error.PERMISSION_DENIED:
		   alert("您设置了阻止该页面获取位置信息!");
	       break;
	  case error.POSITION_UNAVAILABLE:
		   alert("浏览器无法确定您的位置!");
	       break;
	  default:
		  alert("获取位置信息出错!");
	      break;
   }
}

 此时即可正常处理不同的业务了。

 

0
0
分享到:
评论

相关推荐

    JS使用百分比确定图标坐标点击事件Demo

    在JavaScript(JS)中,处理百分比来确定图标坐标并实现点击事件是一项常见的任务,尤其在HTML5(H5)的场景下,如Android设备或微信网页应用中。本示例"JS使用百分比确定图标坐标点击事件Demo"提供了一个方案,教你...

    proj4js实现本地坐标与天地图的转换

    "proj4js"是一个JavaScript库,专门用于进行地理坐标转换,它使得在浏览器中实现多种坐标系统之间的转换变得简单。本篇文章将深入探讨proj4js如何帮助我们实现本地坐标与天地图坐标系统的无缝对接,以及如何利用其...

    Proj4js一个JavaScript库用于将点坐标从一个坐标系转换到另一个坐标系包括基准变换

    此外,Proj4js社区也维护了一个庞大的坐标系定义数据库,用户可以方便地查找和使用已有的坐标系定义。 **五、应用场景** - **地图服务集成**:当需要在Web页面上同时显示来自不同地图服务(如ArcGIS、WMS等)的...

    HTML5 - JS向量坐标计算

    其中,JavaScript作为HTML5的核心组成部分,常常被用于处理动态交互和复杂计算,包括在本案例中的向量坐标计算。向量是物理学和数学中的基本概念,在二维和三维空间中广泛应用于图形学和游戏开发等领域。 在HTML5中...

    Three.js 三维坐标柱状图

    在这个"Three.js 三维坐标柱状图"项目中,我们将探讨如何利用Three.js 创建一个具有三维坐标轴的柱状图,并涉及坐标矢量的使用。 首先,让我们了解Three.js中的基本概念。在Three.js中,一切皆为对象,包括场景...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`<map>`中的`<area>`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

    百度地图根据起始点经纬度坐标确认最佳路线规划

    在地球上,每个位置都可以通过经度和纬度来唯一确定,经度表示东西方向的位置,纬度表示南北方向的位置。百度地图利用这些坐标数据,结合自身的地图数据,为用户提供精确的定位服务。 路线规划是地图服务的核心功能...

    HTML5地理位置定位

    - **HTML5地理位置定位**:这是一种新兴技术,允许Web应用程序访问用户的地理位置信息,无需依赖任何插件或本机应用程序。 - **W3C Geolocation API**:这是一个标准API,它使得开发人员能够编写跨平台的应用程序,...

    贪吃蛇代码html和JavaScript实现

    在这个函数中,我们会检查用户输入的方向,更新蛇的位置,判断是否吃到食物(若吃到则增加蛇的长度),并检测蛇是否撞到自身或边界,以确定游戏是否结束。 JavaScript中的事件监听器负责捕捉用户的键盘输入,根据...

    html5重力弹球附带js文件

    通过监听`mousedown`、`mousemove`和`mouseup`事件,可以确定用户点击的位置,并据此计算弹球的初始速度和方向。 这个项目中的文件很可能包含了HTML文件(定义Canvas元素和页面结构)、JS文件(实现游戏逻辑)以及...

    手机页面强制横屏显示 html5 h5页面 强制横屏 可更改竖屏

    在移动设备上,有时我们可能需要特定的网页或者H5页面在用户打开时强制横屏显示,以便提供更好的用户体验或适应特殊的内容展示。这通常涉及到HTML5和CSS3的一些技术来实现。以下是一些关于如何实现手机页面强制横屏...

    echart map 世界各国城市坐标、中国各省会 经纬度坐标、中英文名称

    经纬度的组合可以精确确定地球上任何一点的位置。 在ECharts地图中使用这些坐标,你可以创建交互式的地图,例如点击某个城市时显示相关信息,或者通过颜色、大小等视觉元素展示城市的数据指标。经纬度坐标在ECharts...

    使用JavaScript和HTML5进行手势识别_JavaScript_下载.zip

    这个压缩包"使用JavaScript和HTML5进行手势识别_JavaScript_下载.zip"包含了一个名为"movement.js-master"的项目,它可能是一个JavaScript库,用于帮助开发者实现基于HTML5的触屏手势识别功能。 HTML5引入了一系列...

    Python-Seeker利用HTML5JavascriptJQuery和PHP以高精度获取设备信息和GeoLocation

    Python-Seeker是一个利用HTML5、JavaScript、jQuery和PHP技术构建的工具,旨在高精度地获取用户设备的各种信息,包括但不限于地理位置(GeoLocation)。这个项目主要面向开发者,特别是对网络应用监控、数据分析或...

    html页面绘制热区工具

    HTML页面绘制热区工具是一种用于在网页上定义交互式区域的技术,它允许用户通过图形化方式创建不规则或特定形状的热点,这些热点可以链接到其他网页、执行JavaScript函数或者触发其他互动效果。这种工具通常被用在...

    中国主要城市地图坐标

    在中国,地图坐标是地理信息系统(GIS)中的关键要素,用于精确地标识地理位置。地图坐标通常基于全球定位系统(GPS)的经纬度系统,包括经度和纬度。本资源"中国主要城市地图坐标"可能是一个HTML文件,包含了中国各...

    爱心源码-JavaScript+HTML5画布心形动画源码下载

    在本项目中,“爱心源码-JavaScript+HTML5画布心形动画源码下载”是一个使用现代Web技术实现的互动艺术作品。这个项目利用了JavaScript和HTML5的Canvas API来绘制并动态更新一个心形动画。让我们深入探讨一下这个...

    html5+canvas+js头像缩放裁剪

    7. **保存结果**:最后,当用户确认裁剪结果,可以使用`toDataURL()`方法将Canvas内容转换为数据URL,通常是一个Base64编码的PNG图像,然后可以发送到服务器进行存储。 在实际应用中,可能还需要考虑一些额外的功能...

    wgs84、西安80坐标互转

    该坐标系的原点位于地球质心,Z轴指向BIH1984.0定义的地球极轴,X轴通过格林尼治天文台旧址,Y轴遵循右手坐标系规则确定。因此,WGS84坐标通常包括经度、纬度和海拔高度三个参数。 西安80坐标系,全称为“1980年...

Global site tag (gtag.js) - Google Analytics