HTML5 地理定位+地图 API：计算客户到商家的距离
最近在做一个相似支付宝口碑商家的功能板块，其中有个功能就是计算出客户与商家的距离，如下图：
image
支付宝口碑商家页面截图
思路分析
1、商家选取店铺地址，将坐标经纬度存入数据库；
2、手机端定位当前客户坐标经纬度；
3、将商家经纬度从数据库取出与当前客户经纬度进行计算；
4、计算出的距离显示在客户端；
用到的工具
1、HTML5地理定位API；
2、百度地图API；
百度地图API使用
1、在百度地图开放平台注册开发者账号；
2、登录开发者账号，在控制台中创立应用，如下图：
image
注意：移动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运行效果图如下：
image
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、首次运行，讯问能否共享位置信息
image
2、点击确认共享位置信息，弹出客户与商家的距离
image
总结
1、百度地图API也可定位客户的坐标经纬度，但是会出现偏移量，与实际位置相差很大，因而可使用HTML5地理定位客户的原始坐标，再将原始坐标转换成百度的定位坐标
2、因为HTML5地理定位仅限在手机端生效，因而使用HTML5地理定位需要在手机端下运行
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » HTML5 地理定位+地图 API：计算客户到商家的距离
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » HTML5 地理定位+地图 API：计算客户到商家的距离
