手把手教你HTML5實(shí)現(xiàn)根據(jù)LBS定位到商家兩點(diǎn)之間距離多少

載鏈接：https://juejin.im/post/5e7e126b51882573c508be13

背景

最近在做一個類似支付寶口碑商家的功能模塊，其中有個功能就是計(jì)算出用戶與商家的距離，如下圖：

支付寶口碑商家頁面截圖

思路分析

1、商家選取店鋪地址，將坐標(biāo)經(jīng)緯度存入數(shù)據(jù)庫；

2、移動端定位當(dāng)前用戶坐標(biāo)經(jīng)緯度；

3、將商家經(jīng)緯度從數(shù)據(jù)庫取出與當(dāng)前用戶經(jīng)緯度進(jìn)行計(jì)算；

4、計(jì)算出的距離顯示在用戶端；

用到的工具

1、HTML5地理定位API；

2、百度地圖API；

百度地圖API使用

1、在百度地圖開放平臺注冊開發(fā)者賬號；

2、登錄開發(fā)者賬號，在控制臺中創(chuàng)建應(yīng)用，如下圖：

注意：移動web端的話，應(yīng)用類型記得選擇瀏覽器端

代碼實(shí)現(xiàn)

1、創(chuàng)建seller.html文件，用來提供商家選取地址坐標(biāo)經(jīng)緯度；

注意：代碼中的ak="您的密鑰"，記得換成控制臺中創(chuàng)建應(yīng)用的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);       // 初始化地圖,設(shè)置城市和地圖級別。

    var ac = new BMap.Autocomplete(    //建立一個自動完成的對象
        {"input" : "suggestId"
        ,"location" : map
    });


    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠標(biāo)點(diǎn)擊下拉列表后的事件
    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;    //獲取第一個智能搜索的結(jié)果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加標(biāo)注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }


    //鼠標(biāo)單擊獲取點(diǎn)擊的經(jīng)緯度
    map.addEventListener("click",function(e){
        alert('該點(diǎn)擊區(qū)域的經(jīng)緯度為：'+e.point.lng + "," + e.point.lat);//將該經(jīng)緯度存入數(shù)據(jù)庫中
    });

</script>復(fù)制代碼

seller.html運(yùn)行效果圖如下：

2、創(chuàng)建user.html文件，用來定位用戶坐標(biāo)經(jīng)緯度，及計(jì)算與商家的距離；

注意1：由于HTML5地理定位僅限在移動端生效，因此user.html需要在移動端下運(yùn)行(可將文件直接發(fā)送到手機(jī)上，在手機(jī)上打開運(yùn)行)

注意2：代碼中的ak="您的密鑰"，記得換成控制臺中創(chuàng)建應(yīng)用的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>計(jì)算用戶到商家的距離</title>
</head>
<body>

</body>
</html>
<script type="text/javascript">

    //使用HTML5地理定位
    function getLocation(){

        //檢測瀏覽器是否支持地理定位
      if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showPosition,showError);
            //如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象
            //getCurrentPosition()方法的第二個參數(shù)showError用于處理錯誤。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)
        }else{
            alert("該設(shè)備瀏覽器不支持地理定位");
        }

      }


    function showPosition(position){

        var Longitude=position.coords.longitude;//HTML5定位獲取的經(jīng)度
        var Latitude=position.coords.latitude;//HTML5定位獲取的緯度

        //將HTML5定位獲取的經(jīng)緯度，通過百度地圖API轉(zhuǎn)換成適應(yīng)于百度定位的經(jīng)緯度
        var ggPoint = new BMap.Point(Longitude,Latitude);

        //坐標(biāo)轉(zhuǎn)換完之后的回調(diào)函數(shù)
        translateCallback = function (data){
          if(data.status === 0) {
            var map = new BMap.Map();
            console.log(data.points[0]);//轉(zhuǎn)換后新的用戶經(jīng)緯度
            var pointA = new BMap.Point(data.points[0].lng,data.points[0].lat);//用戶的經(jīng)緯度
            var pointB = new BMap.Point(商家經(jīng)度,商家緯度);//從數(shù)據(jù)庫中取出商家的經(jīng)緯度
            alert('您到商家的距離是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //獲取兩點(diǎn)距離,保留小數(shù)點(diǎn)后兩位
          }
        }

        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("無法獲取當(dāng)前位置")
          break;
        case error.TIMEOUT:
          alert("操作超時(shí)")
          break;
        case error.UNKNOWN_ERROR:
          alert("未知錯誤")
          break;
        }
      }

    getLocation();

</script>復(fù)制代碼

user.html運(yùn)行效果圖：

1、初次運(yùn)行，詢問是否共享位置信息

2、點(diǎn)擊確認(rèn)共享位置信息，彈出用戶與商家的距離

總結(jié)

1、百度地圖API也可定位用戶的坐標(biāo)經(jīng)緯度，但是會出現(xiàn)偏移量，與實(shí)際位置相差很大，因此可使用HTML5地理定位用戶的原始坐標(biāo)，再將原始坐標(biāo)轉(zhuǎn)換成百度的定位坐標(biāo)

2、由于HTML5地理定位僅限在移動端生效，因此使用HTML5地理定位需要在移動端下運(yùn)行

最后

覺得文章不錯的話，給我個關(guān)注哇，點(diǎn)個贊唄！

emo：

```html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Geolocation（地理定位）：實(shí)時(shí)獲取用戶位置信息</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（地理定位）：實(shí)時(shí)獲取用戶位置信息</h1>
<p>下面是一個使用HTML5 Geolocation實(shí)時(shí)獲取用戶位置信息的示例：</p>
<button onclick="getLocation()">獲取位置</button>
<div id="map"></div>
<p>上述代碼將呈現(xiàn)出一個按鈕和一個地圖容器。通過點(diǎn)擊按鈕，我們可以獲取用戶的位置信息，并在地圖上顯示出來。</p>
<p>在上述代碼中，我們使用了HTML5的Geolocation API來獲取用戶的位置信息。通過調(diào)用<code>navigator.geolocation.getCurrentPosition()</code>方法，我們可以獲取用戶的當(dāng)前位置，并將其傳遞給<code>showPosition()</code>函數(shù)進(jìn)行處理。</p>
<p>在<code>showPosition()</code>函數(shù)中，我們使用了Google Maps API來在地圖上顯示用戶的位置。首先，我們創(chuàng)建一個地圖對象，并將用戶的經(jīng)緯度作為中心點(diǎn)。然后，我們在地圖上添加一個標(biāo)記，表示用戶的位置。</p>
<p>請注意，在上述代碼中，您需要將<code>YOUR_API_KEY</code>替換為您自己的Google Maps API密鑰。</p>
<p>通過使用HTML5 Geolocation功能，我們可以實(shí)時(shí)獲取用戶的位置信息，為用戶提供更加個性化和定制化的服務(wù)和體驗(yàn)。地理定位功能可以應(yīng)用于各種場景，如定位附近的商店、導(dǎo)航等。</p>
</body>
</html>

```

以上是一篇使用HTML5 Geolocation（地理定位）實(shí)時(shí)獲取用戶位置信息的文章，其中包含了示例代碼和一些相關(guān)說明。通過使用HTML5的Geolocation API，我們可以輕松地獲取用戶的位置信息，并在地圖上進(jìn)行顯示。地理定位功能可以應(yīng)用于各種場景，如定位附近的商店、導(dǎo)航等，為用戶提供更加個性化和定制化的服務(wù)和體驗(yàn)。請注意，在使用地理定位功能時(shí)，需要保護(hù)用戶的隱私和安全，確保數(shù)據(jù)的合法使用。

我是永不低頭的熊，喜歡美食、健身，當(dāng)然也喜歡寫代碼，每天不定時(shí)更新各類編程相關(guān)的文章，希望你在碼農(nóng)這條路上不再孤單！

界上很多不信任，其實(shí)都可以用技術(shù)解決。

“有沒有什么辦法能讓我知道，你現(xiàn)在在哪里？”

可能這么一個或兩個人，常會讓你有這樣的疑問。你想搞清楚，又不愿意直接問，也不確定對方會不會和你說實(shí)話。然而他/她，對“陌生人”也許更容易卸下防備。

怎么做，能偽裝成一個陌生人？

這是一篇“可怕”的文章，你可以利用一個簡單的HTML5頁面，把自己偽裝成路人，去窺探別人的隱私。需要iH5.cn這兩天新出的地理定位功能，還可能用上數(shù)據(jù)庫，方法精準(zhǔn)、快捷，更關(guān)鍵的是——隱蔽。

1、一個讓人又喜又怕的測試

前天，我在微信交流群里轉(zhuǎn)發(fā)一個H5，美其名曰《求測試：地理定位準(zhǔn)嗎？》。如果你打開H5，會收到一個獲取地理位置的請求，按下確定，網(wǎng)頁中的騰訊地圖就會跳轉(zhuǎn)到你的當(dāng)前位置。點(diǎn)擊量很快上來了，很多人回應(yīng)定位很準(zhǔn)。

但這并不是我的真正目的！電腦前的我開始不斷刷新網(wǎng)頁后臺的數(shù)據(jù)庫，查看從這個H5中收集到的數(shù)據(jù)——

你沒看錯，打開H5的人所在地理位置（包括國家、省、市、區(qū)、街道、中心緯度、中心經(jīng)度）都被記錄和保存下來了，還對應(yīng)微信頭像和昵稱。

晚上11點(diǎn)，200來人的微信群，半小時(shí)內(nèi)15人點(diǎn)進(jìn)這個H5“配合”測試。當(dāng)大家盯著地圖查看定位是否準(zhǔn)確，點(diǎn)擊“準(zhǔn)”或“不準(zhǔn)”時(shí)，后臺已經(jīng)自動把他們所在的地址保存到數(shù)據(jù)庫。

看到這里你肯定就懂了，我要測的不是定位準(zhǔn)不準(zhǔn)，而是到底會有多少人“中圈套”，暴露自己的地理位置？事實(shí)證明，15人無一幸免！

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

這兩天，阿里巴巴程序員用代碼刷月餅的事鬧得沸沸揚(yáng)揚(yáng)，弄得好像利用技術(shù)“謀福利”是碼農(nóng)的特權(quán)一樣。

實(shí)際上代碼小白也可以用“旁門左道”，比如通過HTML5網(wǎng)頁獲取地理定位，能用上的地方還真不少——

其中，一對一的應(yīng)用還能結(jié)合iH5的跨屏互動功能。比如我特意做了一個跨兩個屏幕的H5，屏幕2的地圖用來定位，屏幕1的地圖用來同步。在告知朋友內(nèi)情的前提下，讓她掃第2個屏幕的二維碼，然后我的手機(jī)上就能實(shí)時(shí)出現(xiàn)她的地理位置……

但這些用法有的涉及侵犯隱私，道理就和你在誰誰的手機(jī)里偷偷安裝監(jiān)控軟件一樣。所以玩歸玩，也不能隨心所欲，傷感情、違法都不好。

3、地理定位功能詳解

當(dāng)然，地理定位應(yīng)用于商業(yè)也大有用處！尤其當(dāng)你想做只針對特定區(qū)域人群的活動，比如抽獎發(fā)紅包什么的。

實(shí)現(xiàn)上用到iH5的地圖組件，接下來詳八它的3個關(guān)鍵功能——

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

除此之外，地圖還具備添加地圖標(biāo)記、根據(jù)標(biāo)記進(jìn)行導(dǎo)航等功能，更詳細(xì)的教程和注意事項(xiàng)還得留意官網(wǎng)更新的教學(xué)視頻。

最后還是那句話，并不是說技術(shù)上能實(shí)現(xiàn)，就可以做了（前面我測試保存的數(shù)據(jù)，已經(jīng)全數(shù)刪除，千萬別去法院告我）。

你當(dāng)然能為阿里巴巴那幾個程序員喊冤，但有些事還是得明知可以為，卻不為。

在線咨詢

上一篇：js的跳轉(zhuǎn)
下一篇：「Html實(shí)戰(zhàn)7」案例“類手機(jī)京東登錄頁面實(shí)現(xiàn)”及標(biāo)簽語義化詳解

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商