3種方法：
1沐旨、H5自帶的方法，獲取經(jīng)緯度
2妖谴、通過地圖提供的JS。獲取位置
3、通過微信的API（這個需要公眾號 / 小程序）
1膝舅、通過H5自帶的獲取經(jīng)緯度的方法
優(yōu)點：
需要引用的資源較少嗡载，H5自帶的方法
缺點：
1、獲取的經(jīng)緯度偏差較大仍稀，如果需要配合地圖使用洼滚，還需要使用地圖提供的經(jīng)緯度轉(zhuǎn)換方法
2、目前大多數(shù)瀏覽器（包括手機(jī)端）技潘，已經(jīng)不支持http的請求獲取用戶地址遥巴，必須為https域名的才能發(fā)起請求。目前測試享幽，在安卓手機(jī)的微信打開的瀏覽器和IE瀏覽器還能支持獲取經(jīng)緯度
JS：
// 獲取當(dāng)前經(jīng)緯度
getLocation: function () {
var that = this
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
alert('經(jīng)度：'+ 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一樣咳秉，報錯信息如上圖）刻两，在進(jìn)行的坐標(biāo)計算，那如果是不支持H5獲取定位的呢滴某？那么地圖的API則會根據(jù)IP磅摹，查詢粗略位置，定位的準(zhǔn)確度為城市級霎奢。詳情可以看下百度地圖的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.')
}
結(jié)果：http地址下ios定位比較準(zhǔn)確，Android 定位在地級市幕侠。
解決：http 換成 https
3帝美、微信提供的API （這個必須有公眾號才能實現(xiàn)）
1、確保公眾號的配置一切正常（合法域名晤硕、token悼潭、回調(diào)地址、JS合法域名…）
2舞箍、引入相關(guān)的JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
3舰褪、獲取簽名 => 初始化需要請求的API => 獲取定位
// 這里的ajax請求，是為了獲取簽名（都是后端的工作了疏橄。根據(jù)文檔生成簽名等）
$.ajax({
type: "post",
url: "你自己的生成簽名的地址",
data: {
// 這里好像是需要回調(diào)的地址
'askUrl': encodeURIComponent(location.href.split('#')[0])
},
dataType: "json",
success: function (data) {
// 生成簽名后占拍，開始使用微信的 wx.config 略就。其中jsApiList就是我們要用的API的列表，因為只需要取經(jīng)緯度晃酒，所以用getLocation就可以了
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來表牢，若要查看傳入的參數(shù)，可以在pc端打開贝次，參數(shù)信息會通過log打出崔兴，僅在pc端時才會打印。
appId: data.appId, // 必填蛔翅，公眾號的唯一標(biāo)識
timestamp: data.timestamp, // 必填敲茄，生成簽名的時間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: data.signature, // 必填搁宾，簽名，見附錄1
jsApiList: [
'getLocation'
]
});
wx.error(function (res) {
alert("失斁笥住："+res.msg");
});
// wx.config 檢測無誤后盖腿，會進(jìn)入到 ready 方法 。 注意type參數(shù)损同。微信多數(shù)的坐標(biāo)體系都為gcj02
wx.ready(function () {
wx.getLocation({
type: "gcj02",
success: function (res) {
latitude = res.latitude;
longitude = res.longitude;
},
cancel: function (res) {
alert("定位失敗翩腐，權(quán)限不足")
},
});
});
}
});
總結(jié)：目前的H5獲取定位，都需要HTTPS的支持膏燃。而微信的api則需要公眾號才行茂卦，各有優(yōu)缺點。更多詳細(xì)的內(nèi)容组哩，可以查看相關(guān)的文檔
