前言

目前我们做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定位的实例教程的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:html5 定位 实现 百度 结合
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    网页生成APP,用做网站的技术去做APP:立即创建

    手机网站开发APP、自助封装APP、200+原生模块、2000+映射JS接口按需打包

    • 上一篇:C#中foreach实例代码
    • 下一篇:.NET中怎么实现程序分页

    相关文章

    相关视频


    • c语言中goto语句的含义是什么
    • C/C++深度分析
    • C#中GDI+编程10个基本技巧二
    • 应用绝对路径与相对路径
    • H5结合百度map实现GPS定位的实例教程
    • HTML5简介
    • HTML5浏览器支持
    • HTML5新元素
    • HTML5内联SVG
    • HTML5 MathML

    视频教程分类

    • php视频教程
    • html视频教程
    • css视频教程
    • JS视频教程
    • jQuery视频教程
    • mysql视频教程
    • Linux视频教程
    • Python视频教程
    • Laravel视频教程
    • Vue视频教程

    专题

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