• html5使用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;
       }
    }

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

    人生苦短,我用python
  • 相关阅读:
    Bootstrap UI层收藏介绍
    你为什么离开上家公司?三大经典面试问题剖析
    浅谈常用的Web安全技术手段
    C#中yield关键字理解
    中小型研发团队架构实践三要点(转自原携程架构师张辉清)
    你确实应该学习并使用的 10 个 C# 特性
    ASP.NET MVC 异步Excel数据选择导出
    表格中控制tr的display:block在火狐中显示错乱的解决方法
    切图笔记
    表单验证jquery.validate
  • 原文地址:https://www.cnblogs.com/pigga/p/10098311.html
Copyright © 2020-2023  润新知