前端獲取經緯度

H5獲取

參考

geolocation 對象

下面的方法只能獲取到粗精度

注意：無 GPS 模塊的 PC 設備使用 Chrome 瀏覽器的時候，位置信息是連接谷歌服務器獲取的，國內用戶可能獲取位置信息失敗。

參考：JS獲取本地經緯度

一個最簡單的調用方法

window.navigator.geolocation.getCurrentPosition(function (position) {
    console.log(position.coords.latitude)
    console.log(position.coords.longitude)
})

封裝好的代碼如下：

function getPosition () {
  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        let latitude = position.coords.latitude
        let longitude = position.coords.longitude
        let data = {
          latitude: latitude,
          longitude: longitude
        }
        resolve(data)
      }, function () {
        reject(arguments)
      })
    } else {
      reject('你的瀏覽器不支持當前地理位置信息獲取')
    }
  })
}

調用方法如下：

      // 獲取當前經緯度座標
      getPosition().then(result => {
        // 返回結果示例：
        // {latitude: 30.318030999999998, longitude: 120.05561639999999}
        // 一般小數點後只取六位，所以用以下代碼搞定
        let queryData = {
          longtitude: String(result.longitude).match(/\d+\.\d{0,6}/)[0],
          latitude: String(result.latitude).match(/\d+\.\d{0,6}/)[0],
          channelType: '00'
        }
        console.log(queryData)
        // 以下放置獲取座標後你要執行的代碼:
        // ...
      }).catch(err => {
        console.log(err)
      })

記得，這是一個異步操作，所以獲取座標後需要執行的代碼不能直接寫在函數後面，而是應該寫在then裏面（參照註釋所寫的位置）

參考：移動端獲取當前用戶的經緯度

一、HTML5 geolocation的屬性

if(navigator.geolocation){
  navigator.geolocation.getCurrentPosition(onSuccess , onError);
}else{
  alert("您的瀏覽器不支持使用HTML 5來獲取地理位置服務");
}
//定位數據獲取成功響應
function  onSuccess(position){
      alert('緯度: '          + position.coords.latitude          + '\n' +
      '經度: '         + position.coords.longitude         + '\n' +
      '海拔: '          + position.coords.altitude          + '\n' +
      '水平精度: '          + position.coords.accuracy          + '\n' +
      '垂直精度: ' + position.coords.altitudeAccura)
}
//定位數據獲取失敗響應
function onError(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;
  }
}

二、百度地圖api定位

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxx"></script>
 <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
 <script>
    window.BMap = BMap；
    let BMap = window.BMap
    let geolocation = new BMap.Geolocation()

    geolocation.enableSDKLocation(); //允許SDK輔助
    geolocation.getCurrentPosition(function (r)
   {
        if(this.getStatus() == 0){
        console.log(r)
       }
  })
 </script>

HTML5獲取地理經緯度並通過百度接口得到實時位置
百度地圖api
百度地圖鷹眼記錄軌跡

三 、騰訊地圖api定位

<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
    src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
</iframe>

window.addEventListener('message', function(event) {
    // 接收位置信息
    var loc = event.data;
    console.log('location', loc);
}, false)       ;
setTimeout(function() {
    if (!_this.loc) {
       console.log('定位超時')
    }
}, 6000) // 6s爲推薦值，業務調用方可根據自己的需求設置改時間，不建議太短

騰訊地圖組件API
騰訊JavaScript API

實操

參考：vue使用騰訊地圖定位

引入js包（注意：vue項目得在首頁的index.html裏面引入）

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//這個是固定的用這個鏈接就可以
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

三步走

<template>
    <div id="container" style="width:600px;height:500px;"></div>
</template>

<script>
    export default{
        name:'news',
        data() {
            return {
                longitude:0,//經度
                latitude:0,//緯度
                city:''
            }
        },
        methods:{
  //第一部分
              //定位獲得當前位置信息
            getMyLocation() {
                var geolocation = new qq.maps.Geolocation("yourkey", "yourkey名稱");
                geolocation.getIpLocation(this.showPosition, this.showErr);
                //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精確度比較高
            },
            showPosition(position) {
                console.log(position);
                this.latitude = position.lat;
                this.longitude = position.lng;
                this.city = position.city;
                this.setMap();
            },
            showErr() {
                console.log("定位失敗");
                this.getMyLocation();//定位失敗再請求定位，測試使用
            },
//第二部分
        //位置信息在地圖上展示
            setMap() {
                //步驟：定義map變量 調用 qq.maps.Map() 構造函數   獲取地圖顯示容器
                //設置地圖中心點
                var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
                //定義工廠模式函數
                var myOptions = {
                  zoom: 13,               //設置地圖縮放級別
                  center: myLatlng,    //設置中心點樣式
                  mapTypeId: qq.maps.MapTypeId.ROADMAP  //設置地圖樣式詳情參見MapType
                }
                // //獲取dom元素添加地圖信息
                var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//第三部分
              //給定位的位置添加圖片標註
                var marker = new qq.maps.Marker({
                    position: myLatlng,
                    map: map
                });
                //給定位的位置添加文本標註
                var marker = new qq.maps.Label({
                    position: myLatlng,
                    map: map,
                    content:'這是我當前的位置，偏差有點大，哈哈'
                });
            }
          },
        mounted() {
            this.getMyLocation();
            }
        }
</script>

小夥伴們用的時候可以一步一步去實現，保證每一步都實現後再進行下一步

vue使用騰訊地圖（一）https://www.jianshu.com/p/130cdbd07394
vue使用騰訊地圖（二）事件https://www.jianshu.com/p/0ce29aec5f47
vue使用騰訊地圖（三）標註https://www.jianshu.com/p/eca4f20ee1cb
vue使用騰訊地圖（四）定位實戰qq.maps.Geolocation

申請key地址https://lbs.qq.com/console/mykey.html

官方文檔
https://lbs.qq.com/tool/component-geolocation.html
https://lbs.qq.com/javascript_v2/guide-start.html