H5结合百度map实现GPS定位的实例教程

前言

     目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市。按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称。

     1、查询得到城市名称,我们根据城市名称在我们自己的数据库里再查询对应的城市id(查询会很频繁,可以基于xml 缓存查询,也可以放到redis里)

     2、为了保险起见,我们也会在自己的库里根据经纬度维护一套城市信息,防止接口不可用时不影响定位。

 

H5 GPS定位

 1  (function () { 2         var 3             isGeolocation = false, 4             lat = 0, 5             lng = 0, 6             coords = null; 7              8         if (navigator.geolocation) { isGeolocation = true; }; 9         if (isGeolocation) {10             function getPosSuccess(position) {11                 coords = position.coords;12                 lat = coords.latitude, lng = coords.longitude;13                 $.ajax({14                     type: 'GET',15                     dataType: 'json',16                     url: '/Home/GetPositionArea',17                     data: { 'lat': lat, 'lng': lng },18                     success: function (data) {19 20                     }21                 });22             };23             function getPosError(err) {24                 switch (err) {25                     case err.PERMISSION_DENIED:26                         console.log("您拒绝了共享位置,可手动选择城市。");27                         break;28                     case err.POSITION_UNAVAILABLE:29                         console.log("无法获取当前位置");30                         break;31                     case err.TIMEOUT:32                         console.log("获取位置超时");33                         break;34                     default:35                         console.log("未知错误");36                         break;37                 }38                 39             };40             navigator.geolocation.getCurrentPosition(getPosSuccess, getPosError, null);41         } else {42             43         };44 45     })();

登录后复制

 

结合百度接口查询具体城市

 JsonResult GetPositionArea( lng,  api = result =

登录后复制

 

以上就是H5结合百度map实现GPS定位的实例教程的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2440163.html

(0)
上一篇 2025年3月3日 12:20:00
下一篇 2025年3月1日 22:46:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论