3種方法：
1、H5自帶的方法，獲取經緯度
2、通過地圖提供的JS。獲取位置
3、通過微信的API（這個需要公眾號 / 小程序）
1、通過H5自帶的獲取經緯度的方法
優點：
需要引用的資源較少，H5自帶的方法
缺點：
1、獲取的經緯度偏差較大，如果需要配合地圖使用，還需要使用地圖提供的經緯度轉換方法
2、目前大多數瀏覽器（包括手機端），已經不支持http的請求獲取用戶地址，必須為https域名的才能發起請求。目前測試，在安卓手機的微信打開的瀏覽器和IE瀏覽器還能支持獲取經緯度
JS：
// 獲取當前經緯度
getLocation: function () {
var that = this
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert('經度：'+ position.coords.latitude)
alert('緯度：'+ position.coords.longitude)
}, function (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;
}
}, { enableHighAcuracy: false });
} else {
alert('Geolocation is not supported by this browser.')
}
},
2、通過地圖定位
簡單說下：
其實所有地圖的定位，也是基於H5的定位（所以很多時候引入地圖定位的時候，可能會報一個警告，和H5一樣，報錯信息如上圖），在進行的坐標計算，那如果是不支持H5獲取定位的呢？那么地圖的API則會根據IP，查詢粗略位置，定位的准確度為城市級。詳情可以看下百度地圖的API。
代碼部分:
引入地圖js（百度地圖）<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密鑰"></script>
if (navigator.geolocation) {
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
alert('您的位置：'+r.point.lng+','+r.point.lat);
}else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
} else {
alert('Geolocation is not supported by this browser.')
}
結果：http地址下ios定位比較准確，Android 定位在地級市。
解決：http 換成 https
3、微信提供的API （這個必須有公眾號才能實現）
1、確保公眾號的配置一切正常（合法域名、token、回調地址、JS合法域名…）
2、引入相關的JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
3、獲取簽名 => 初始化需要請求的API => 獲取定位
// 這里的ajax請求，是為了獲取簽名（都是后端的工作了。根據文檔生成簽名等）
$.ajax({
type: "post",
url: "你自己的生成簽名的地址",
data: {
// 這里好像是需要回調的地址
'askUrl': encodeURIComponent(location.href.split('#')[0])
},
dataType: "json",
success: function (data) {
// 生成簽名后，開始使用微信的 wx.config 。其中jsApiList就是我們要用的API的列表，因為只需要取經緯度，所以用getLocation就可以了
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: data.appId, // 必填，公眾號的唯一標識
timestamp: data.timestamp, // 必填，生成簽名的時間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
signature: data.signature, // 必填，簽名，見附錄1
jsApiList: [
'getLocation'
]
});
wx.error(function (res) {
alert("失敗："+res.msg");
});
// wx.config 檢測無誤后，會進入到 ready 方法 。 注意type參數。微信多數的坐標體系都為gcj02
wx.ready(function () {
wx.getLocation({
type: "gcj02",
success: function (res) {
latitude = res.latitude;
longitude = res.longitude;
},
cancel: function (res) {
alert("定位失敗，權限不足")
},
});
});
}
});
總結：目前的H5獲取定位，都需要HTTPS的支持。而微信的api則需要公眾號才行，各有優缺點。更多詳細的內容，可以查看相關的文檔
參考：https://blog.csdn.net/Jioho_chen/article/details/83592630