H5结合百度map实现GPS定位
2018-06-17 19:07:58来源:未知 阅读 ()
前言
目前我们做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 })();
结合百度接口查询具体城市
public JsonResult GetPositionArea(decimal lng, decimal lat) { string api = string.Format( "http://api.map.baidu.com/geocoder/v2/?output=json&ak=XXXXX&location={0},{1}", lat, lng); //传入自己的业务参数ak string result = HttpRequestHelper.Get(api); return Json(result, JsonRequestBehavior.AllowGet); }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- delphi 调用百度识别 2020-04-07
- UniGui安装(01) 2020-01-31
- 人体分析Demo-百度API 2019-09-23
- 百度API车牌识别——Restful方式 2019-09-23
- 人脸识别Demo 2019-08-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash