关于web移动端定位

最近在做一个搜索附近3公里所有超市信息(已经录入数据库的超市信息)的功能。思路很简单只是获取用户当前地理位置(经纬度),通过sql语句筛选出3公里范围内的所有超市信息,然后传递到前台页面展示出来。但是我是第一次通过移动端web获取用户地理位置,遇到很多的问题,我觉得我有必要记录一下,一方面彰显自己的成就,一方面想把经验分享给大家。

移动web端获取用户地理位置很麻烦,因为涉及用户隐私,所以web获取用户地理位置的方式很少而且精确度很低。我刚知道要做定位的功能,第一时间去看了百度地图API,找到了web浏览器定位,说是浏览器定位其实也是通过用户IP定位,我很快就完成这个所谓的搜索功能,觉得这真是太简单了。但是事实并不是如此,我最开始测试的时候是用WiFi测试的,测试的结果发现精确度有点低,而且安卓端和ios端数据显示还不一样,根据我们的测试报告上说应该是ios更精准一些,这些还不算什么,因为我们只是搜索三公里范围内的数据有些误差也可以,但是一个致命的问题让我不得不放弃了百度地图。

这个致命问题就是,只要连接移动数据(不使用WiFi)全部都定位到合肥去了(测试使用的是安徽手机号),我百思不得其解,经过一番测试思考才明白所谓的ip定位是什么意思,也明白了所谓移动数据是什么?所谓的ip定位就是通过路由地址定位,移动网络就是一个大的WiFi网络环境,使用移动数据定位会定位到这个WiFi网络的路由所在地,也就是合肥。这一结果让我心凉,移动网络不能定位这让我们的需求也成了泡影,我不得不放弃已经完成的功能另外找寻找解决方案。

通过不停的搜索、寻找资料、询问前辈,我找到了第二种解决方案——html5定位,这个比之前调用百度地图的API简单多了,我很快又一次完成了这个功能。html5定位无论是连接WiFi还是移动网络都能定位到用户所在位置,但是同样也出现一个问题,使用WiFi比使用移动网络精准,但是这不影响我们的功能需求,算是符合我们的要求,但测试人员并不打算放过我,最新的测试报告上说IOS端会弹出这么一段话Origin does not have permission to use Geolocation service,翻译过来就是请求源没有权限使用地理定位服务,我一脸懵逼。找了很多资料才明白,苹果公司认为http请求都是不安全的所以拒绝为http请求提供地理定位服务,而我们公司使用的就是http请求。

我这时候有点绝望了,疯狂的找解决方案,最后还真让我找到了——腾讯地图。我一直觉得腾讯很坑爹,网页游戏都被人骂,但是这次不得不感谢它。腾讯地图也是使用html5定位技术但人家是https请求,所以腾讯抓住了这个机会,建立一个类似中转站的请求转发(我个人的理解)。我们的请求会到腾讯的中转站(https)然后在(https)返回给我们这样我们的请求就是https请求IOS用户端就会为我们的定位提供地理位置定位服务了,这次测试终于过了。

虽然过程很曲折但是结果还算不错,总算满足了定位的功能需求,也收获了很多东西。

时间: 2024-07-31 10:41:29

关于web移动端定位的相关文章

从web移动端布局到react native布局

在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'> <div class='header'></div> <div class='content'></div> <div class='footer'></div> </div> 首先可以利用fixed或者absolute

【转载】Web移动端Fixed布局的解决方案

特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子

web移动端开发经验总结

整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> <!-- width可视宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小

关于web移动端返回到顶部的解决方案

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些, 下面是具体实现代码,兼容pc: //返回顶部动画 //goTop(500);//500ms内滚回顶部 function goTop(times){  if(!!!times){   $(window).scrollTop(0);   r

如何提高Web服务端并发效率的异步编程技术

作为一名web工程师都希望自己做的web应用能被越来越多的人使用,如果我们所做的web应用随着用户的增多而宕机了,那么越来越多的人就会变得越来越少了,为了让我们的web应用能有更多人使用,我们就得提升web应用服务端的并发能力.那么我们如何做到这点了,根据现有的并发技术我们会有如下选择: 第一个做法:为每个客户端发送给服务端的请求都开启一个线程,等请求处理完毕后该线程就被销毁掉,这种做法很直观,但是在现代的web服务器里这种做法已经很少使用了,原因是新建一个线程,销毁一个线程的开销(开销是指占用

搭建一个java web服务端

最近也是做了一个简单的java web 项目,由于以前也是没接触过,在这里记录下搭建一个web服务端的过程. 一般我们做一个服务端要么在本地自己的电脑上先安装环境,一般是windows系统,主要安装jdk + tomcat + mysql,这些安装教程网上都有,也很简单,我这里就不多说了,我要讲的是在一个远程linux服务器上搭建web服务端环境. 对于一个liunx服务器,我们可以使用xshell等终端工具登录来操作远程服务器,使用xshell的好处是,我们可以使用rz ,sz命令上传上载文件

winform客户端利用webClient实现与Web服务端的数据传输

由于项目需要,最近研究了下WebClient的数据传输.关于WebClient介绍网上有很多详细介绍,大概就是利用WebClient可以实现对Internet资源的访问.无外乎客户端发送请求,服务端处理请求.回应请求.所以,我下面就简单描述下学习过程中遇到的一些问题: 1.关于Winform客户端请求 WebClient wc = new WebClient();//初始化webclient string path = "http://192.168.1.115:8089/Handler1.as

媒体电商团队承接Web移动端中小项目

媒体电商团队承接Web移动端中小项目. 1.承接业务:微直播.摇一摇.h5小游戏.会务.社区.微信红包.分销商城等. 2.联系方式:微信号:xie9650,手机:18613954008 ,具体面谈..

Web移动端使用localStorage缓存Js和CSS文件

将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间. 电脑端使用localstorage是测试没有问题的,但是用android的apk打包之后,导致localstorage失效,无法进行缓存,查阅资料之后,得知解决方法: 安卓代码: mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setAppCacheMaxSize(1024*1