最近寫h5用到了定位功能，網上搜索如果使用其他API的話還需要下載sdk，所以就使用的瀏覽器的，比較簡陋。不過定位也還ok，微信自帶瀏覽器偏差了大概500米， UC的大概也就是幾米吧，比較精確了。
js代碼：
// 判斷是否支持獲取經緯度
// 獲取本機經緯度
getlatandlong=()=> {alert('經度：'+this._position.lat,'維度：'+this._position)}
getLocation=()=>{
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(this.showPosition,this.showError);
}else{
alert("瀏覽器不支持地理定位");
}
//調用coords的latitude和longitude即可獲取到用戶的緯度和經度。
};
接下來是兩個回調函數 調用成功，和調用失敗的函數
showPosition=(position)=>{
var lat = position.coords.latitude; //緯度
var lag = position.coords.longitude; //經度
this._position.lon=lag;
this._position.lat = lat;
console.log('緯度:'+lat+',經度:'+lag);
};
// 上面的代碼可以知道，如果用戶設備支持地理定位，則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象，getCurrentPosition() 方法的第二個參數showError用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數。
// 我們先來看函數showError()，它規定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：
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;
}
};
如果不熟悉es6寫法的話，上述的方法名稱這樣定義：
function(參數){
// 方法內容
}
提供一個查詢座標的地址；http://lbs.amap.com/console/show/picker
我這個只是獲取經緯度，如果你還要轉換成爲對應的地址，自行百度，對接百度API的比較方便。
=============插入插入=====================
這個經緯度距離偏差我可能搞錯了, h5獲得的座標系可能是 WGS-84座標系而不是 GCJ-02座標系(火星座標系), 你們處理這個經緯度的時候, 注意一下哈. 我也是今天想起來了順便加上的.2020年3月16日附帶一個 座標系經緯度轉換的java算法.https://www.cnblogs.com/blogger-Li/p/11616835.html 他寫的很清楚但是我沒試過哈....
==============插入插入====================
提供一個地址轉換的地址：點擊打開鏈接
下面代碼來自於上面大牛提供的：
var map = new BMap.Map("allmap"); // 這個需要在html主題中定義一個id爲 allmap 的標籤
var longitude, latitude;
navigator.geolocation.getCurrentPosition(function (position) {
longitude = position.coords.longitude;
latitude = position.coords.latitude;
});
setTimeout(function () {
var gpsPoint = new BMap.Point(longitude, latitude); // 使用百度地圖轉換的需要轉換成百度地圖專用的經緯度
BMap.Convertor.translate(gpsPoint, 0, function (point) {
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
}, 3000);
=======百度地圖使用需要密鑰,這裏提供一個騰訊的api, 引入js之後可以直接使用的==============================
騰訊提供的api包括轉換百度,高德座標/將經緯度換成地址...
我試了兩個, 比較好用啦
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=convertor"> </script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
window.οnlοad=function(){
//調用地址解析類
geocoder = new qq.maps.Geocoder({
complete: function (result) {
// debugger;
location.href = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + result.detail.location.lat + "," + result.detail.location.lng + ";title:想要顯示的座標名稱&referer=myapp";
}
});
geocoder.getLocation("北京市海淀區志新路");
//console.log()
//$('.class-btn').attr('name','wenbin'); 百度轉騰訊座標
//qq.maps.convertor.translate(new qq.maps.LatLng("39.91512","116.403995"), 3, function(res){
// latlng = res[0];
// console.log(latlng);
//});
}
}
</script>
=======2019年1月9日 09:58:33==========
上面那個騰訊的不是免費的啦, 直接運行會報錯 
在引入的js裏面加入這個可以, 不知道能免費試用多長時間, 畢竟麻花藤有句話, 沒錢玩你麻痹.
key=GPHBZ-WBV6I-NFKG7-5BZ3O-WBEDH-WRBXV
