最近在做一个相似支付宝口碑商家的功能模块，其中有个性能就是计算出用户与商家的间隔，如下图：

支付宝口碑商家页面截图

思路剖析

1、商家选取店铺地址，将坐标经纬度存入数据库；
2、挪动端定位以后用户坐标经纬度；
3、将商家经纬度从数据库取出与以后用户经纬度进行计算；
4、计算出的间隔显示在用户端；

用到的工具

1、HTML5天文定位API；
2、百度地图API；

百度地图API应用

1、在百度地图开放平台注册开发者账号；
2、登录开发者账号，在控制台中创立利用，如下图：

留神：挪动web端的话，利用类型记得抉择浏览器端

代码实现

1、创立seller.html文件，用来提供商家选取地址坐标经纬度；
留神：代码中的ak="您的密钥"，记得换成控制台中创立利用的AK密钥

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <style type="text/css">        body, html{            width: 100%;            height: 100%;            margin:0;            font-family:"微软雅黑";            font-size:14px;        }        #l-map{            height:300px;            width:100%;        }        #r-result{            width:100%;        }    </style>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <title>商家选取店铺地址</title></head><body>    <div style="display: flex;">        <div style="width: 50%;height: 700px" id="l-map"></div>        <div style="width: 50%">            <div id="r-result">请输出:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>        </div>    </div></body></html><script type="text/javascript">    // 百度地图API性能    function G(id) {        return document.getElementById(id);    }    var map = new BMap.Map("l-map");    map.centerAndZoom("北京",12);       // 初始化地图,设置城市和地图级别。    var ac = new BMap.Autocomplete(    //建设一个主动实现的对象        {"input" : "suggestId"        ,"location" : map    });    var myValue;    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件    var _value = e.item.value;        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;        setPlace();    });    function setPlace(){        map.clearOverlays();    //革除地图上所有覆盖物        function myFun(){            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜寻的后果            map.centerAndZoom(pp, 18);            map.addOverlay(new BMap.Marker(pp));    //增加标注        }        var local = new BMap.LocalSearch(map, { //智能搜寻          onSearchComplete: myFun        });        local.search(myValue);    }    //鼠标单击获取点击的经纬度    map.addEventListener("click",function(e){        alert('该点击区域的经纬度为：'+e.point.lng + "," + e.point.lat);//将该经纬度存入数据库中    });</script>

seller.html运行效果图如下：

2、创立user.html文件，用来定位用户坐标经纬度，及计算与商家的间隔；
留神1：因为HTML5天文定位仅限在挪动端失效，因而user.html须要在挪动端下运行(可将文件间接发送到手机上，在手机上关上运行)
留神2：代码中的ak="您的密钥"，记得换成控制台中创立利用的AK密钥

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>    <title>计算用户到商家的间隔</title></head><body></body></html><script type="text/javascript">    //应用HTML5天文定位    function getLocation(){        //检测浏览器是否反对天文定位      if (navigator.geolocation){            navigator.geolocation.getCurrentPosition(showPosition,showError);            //如果getCurrentPosition()运行胜利，则向参数showPosition中规定的函数返回一个coordinates对象            //getCurrentPosition()办法的第二个参数showError用于处理错误。它规定当获取用户地位失败时运行的函数        }else{            alert("该设施浏览器不反对天文定位");        }      }    function showPosition(position){        var Longitude=position.coords.longitude;//HTML5定位获取的经度        var Latitude=position.coords.latitude;//HTML5定位获取的纬度        //将HTML5定位获取的经纬度，通过百度地图API转换成适应于百度定位的经纬度        var ggPoint = new BMap.Point(Longitude,Latitude);        //坐标转换完之后的回调函数        translateCallback = function (data){          if(data.status === 0) {            var map = new BMap.Map();            console.log(data.points[0]);//转换后新的用户经纬度            var pointA = new BMap.Point(data.points[0].lng,data.points[0].lat);//用户的经纬度            var pointB = new BMap.Point(商家经度,商家纬度);//从数据库中取出商家的经纬度            alert('您到商家的间隔是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点间隔,保留小数点后两位          }        }        var convertor = new BMap.Convertor();        var pointArr = [];        pointArr.push(ggPoint);        convertor.translate(pointArr, 1, 5, translateCallback)    }    function showError(error){      switch(error.code) {        case error.PERMISSION_DENIED:          alert("用户不容许天文定位")          break;        case error.POSITION_UNAVAILABLE:          alert("无奈获取以后地位")          break;        case error.TIMEOUT:          alert("操作超时")          break;        case error.UNKNOWN_ERROR:          alert("未知谬误")          break;        }      }    getLocation();</script>

user.html运行效果图：
1、首次运行，询问是否共享地位信息

2、点击确认共享地位信息，弹出用户与商家的间隔

总结

1、百度地图API也可定位用户的坐标经纬度，然而会呈现偏移量，与理论地位相差很大，因而可应用HTML5天文定位用户的原始坐标，再将原始坐标转换成百度的定位坐标
2、因为HTML5天文定位仅限在挪动端失效，因而应用HTML5天文定位须要在挪动端下运行

最初

感觉文章不错的，给我点个赞哇，关注一下呗！
技术交换可关注微信公众号【GitWeb】，加我好友一起探讨
微信交换群：加好友（备注思否）邀你入群，抱团学习共提高