• 问题分析
  • 问题
  • 原始Html5获取经度和纬度代码
  • 问题产生原因
  • 解决方案


需求：

  1. 在微信公众号获取用户的经纬度，识别用户所在城市；
  2. 根据数据库存储的店铺地址，调用百度地图API换算距离，将用户附近店铺根据距离远近排序展示给用户，点击附近店铺可进入百度地图导航界面

问题分析

问题：

使用Html5去获取用户的定位信息，即经度和纬度。在安卓手机上是可以正常获取的，但是在苹果IOS手机上是无法获取的，会提示错误信息，截图如下，并附原始获取用户的经度和纬度的代码：
IOS手机错误提示为：
翻译为：调用者没有权限使用地理定位服务

//没有权限使用地理定位服务
 origin does not have permission to use geolocation service

截图如下：

ios 经纬度显示格式 苹果手机 经纬度_json

原始Html5获取经度和纬度代码

以下代码在安卓可以获取经纬度，在IOS不可以，会提示上述错误

<script type="text/javascript">
$(function(){

    var options ={};
    //判断手机是否支持该功能,并获取经纬度
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(success,error,options);
    }
    else
    {
        alert('你的浏览器不支持定位功能');
    }
    //成功的回调
    function success(lo,la)
    {
        var la = position.coords.latitude;
        var lo = position.coords.longitude;
        alert('纬度'+la);alert('经度'+lo);
        //something.......
    }
    //失败的回调
    function error(errorCode)
    {
        alert('获取失败，原因：'+errorCode.message);
    }
})
</script>

问题产生原因

苹果的IOS做了限制，如果需要使用IOS的服务，必须是HTTS协议的域名，不能是HTTP。而博主公司的域名是HTTP的，所以直接使用HTML5调用是不被IOS允许的。

解决方案

思路：
调用腾讯地图接口，腾讯接口会使用HTTPS协议去调用html5拿到用户经纬度，然后返回给我。
代码如下：
1、引入JS

<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js "></script>

2、获取经纬度

<script type="text/javascript" >
    //填入自己在腾讯地图开放平台申请的KEY
   var geolocation = new qq.maps.Geolocation("IRVBZ-GVWRK-3HHJV-ARRRR-QMQCS-XXXX", "myapp");
    var options = {timeout: 8000};
    geolocation.getLocation(sucCallback, errCallback,options);  
    //成功的回调
    function sucCallback(position)
    {
        var mapInfo=JSON.stringify(position, null, 4);
        var jsonMapInfo=eval（'(' + mapInfo + ')');
        //alert("经度"+jsonMapInfo.lng+"维度"+jsonMapInfo.lat);        
        success(jsonMapInfo.lng,jsonMapInfo.lat);
    }
    //失败的回调
    function errCallback()
    {
          alert("定位失败!");
    }    
    //业务逻辑    
    function success(lo,la)
    {
        //拿到经纬度的业务逻辑...
    }   
</script>

参考链接：
http://science.china.com.cn/2016-09/14/content_9034800.htm
http://lbs.qq.com/tool/component-geolocation.html
http://lbs.qq.com/

好吧，到此问题就差不多解决了，非常感谢热心博主–时光城主的指点