手把手教你HTML5实现根据LBS定位到商家两点之间距离多少

载链接：https://juejin.im/post/5e7e126b51882573c508be13

背景

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

支付宝口碑商家页面截图

思路分析

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地理定位需要在移动端下运行

最后

觉得文章不错的话，给我个关注哇，点个赞呗！

emo：

```html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Geolocation（地理定位）：实时获取用户位置信息</title>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("您的浏览器不支持地理定位。");
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
title: "您的位置"
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<h1>HTML5 Geolocation（地理定位）：实时获取用户位置信息</h1>
<p>下面是一个使用HTML5 Geolocation实时获取用户位置信息的示例：</p>
<button onclick="getLocation()">获取位置</button>
<div id="map"></div>
<p>上述代码将呈现出一个按钮和一个地图容器。通过点击按钮，我们可以获取用户的位置信息，并在地图上显示出来。</p>
<p>在上述代码中，我们使用了HTML5的Geolocation API来获取用户的位置信息。通过调用<code>navigator.geolocation.getCurrentPosition()</code>方法，我们可以获取用户的当前位置，并将其传递给<code>showPosition()</code>函数进行处理。</p>
<p>在<code>showPosition()</code>函数中，我们使用了Google Maps API来在地图上显示用户的位置。首先，我们创建一个地图对象，并将用户的经纬度作为中心点。然后，我们在地图上添加一个标记，表示用户的位置。</p>
<p>请注意，在上述代码中，您需要将<code>YOUR_API_KEY</code>替换为您自己的Google Maps API密钥。</p>
<p>通过使用HTML5 Geolocation功能，我们可以实时获取用户的位置信息，为用户提供更加个性化和定制化的服务和体验。地理定位功能可以应用于各种场景，如定位附近的商店、导航等。</p>
</body>
</html>

```

以上是一篇使用HTML5 Geolocation（地理定位）实时获取用户位置信息的文章，其中包含了示例代码和一些相关说明。通过使用HTML5的Geolocation API，我们可以轻松地获取用户的位置信息，并在地图上进行显示。地理定位功能可以应用于各种场景，如定位附近的商店、导航等，为用户提供更加个性化和定制化的服务和体验。请注意，在使用地理定位功能时，需要保护用户的隐私和安全，确保数据的合法使用。

我是永不低头的熊，喜欢美食、健身，当然也喜欢写代码，每天不定时更新各类编程相关的文章，希望你在码农这条路上不再孤单！

界上很多不信任，其实都可以用技术解决。

“有没有什么办法能让我知道，你现在在哪里？”

可能这么一个或两个人，常会让你有这样的疑问。你想搞清楚，又不愿意直接问，也不确定对方会不会和你说实话。然而他/她，对“陌生人”也许更容易卸下防备。

怎么做，能伪装成一个陌生人？

这是一篇“可怕”的文章，你可以利用一个简单的HTML5页面，把自己伪装成路人，去窥探别人的隐私。需要iH5.cn这两天新出的地理定位功能，还可能用上数据库，方法精准、快捷，更关键的是——隐蔽。

1、一个让人又喜又怕的测试

前天，我在微信交流群里转发一个H5，美其名曰《求测试：地理定位准吗？》。如果你打开H5，会收到一个获取地理位置的请求，按下确定，网页中的腾讯地图就会跳转到你的当前位置。点击量很快上来了，很多人回应定位很准。

但这并不是我的真正目的！电脑前的我开始不断刷新网页后台的数据库，查看从这个H5中收集到的数据——

你没看错，打开H5的人所在地理位置（包括国家、省、市、区、街道、中心纬度、中心经度）都被记录和保存下来了，还对应微信头像和昵称。

晚上11点，200来人的微信群，半小时内15人点进这个H5“配合”测试。当大家盯着地图查看定位是否准确，点击“准”或“不准”时，后台已经自动把他们所在的地址保存到数据库。

看到这里你肯定就懂了，我要测的不是定位准不准，而是到底会有多少人“中圈套”，暴露自己的地理位置？事实证明，15人无一幸免！

2、人与人最基本的信任呢？

这两天，阿里巴巴程序员用代码刷月饼的事闹得沸沸扬扬，弄得好像利用技术“谋福利”是码农的特权一样。

实际上代码小白也可以用“旁门左道”，比如通过HTML5网页获取地理定位，能用上的地方还真不少——

其中，一对一的应用还能结合iH5的跨屏互动功能。比如我特意做了一个跨两个屏幕的H5，屏幕2的地图用来定位，屏幕1的地图用来同步。在告知朋友内情的前提下，让她扫第2个屏幕的二维码，然后我的手机上就能实时出现她的地理位置……

但这些用法有的涉及侵犯隐私，道理就和你在谁谁的手机里偷偷安装监控软件一样。所以玩归玩，也不能随心所欲，伤感情、违法都不好。

3、地理定位功能详解

当然，地理定位应用于商业也大有用处！尤其当你想做只针对特定区域人群的活动，比如抽奖发红包什么的。

实现上用到iH5的地图组件，接下来详八它的3个关键功能——

把位置信息输出到变量后，你的玩法就多了，比如：

除此之外，地图还具备添加地图标记、根据标记进行导航等功能，更详细的教程和注意事项还得留意官网更新的教学视频。

最后还是那句话，并不是说技术上能实现，就可以做了（前面我测试保存的数据，已经全数删除，千万别去法院告我）。

你当然能为阿里巴巴那几个程序员喊冤，但有些事还是得明知可以为，却不为。

在线咨询

上一篇：js的跳转
下一篇：「Html实战7」案例“类手机京东登录页面实现”及标签语义化详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商