側重：本文探索了 http 協議下，pc + 移動端定位解決方案
IOS版本： ios14
原生Geolocation 接口:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>
<div id="msg"></div>
<script>
function geoFindMe() {
var output = document.getElementById("out");
var msg = document.getElementById("msg");
if (!navigator.geolocation) {
output.innerHTML = "<p>您的瀏覽器不支持地理位置</p>";
return;
} else {
msg.innerHTML = "<p>支持地理位置</p>";
// Register for location changes
var watchId = navigator.geolocation.getCurrentPosition(scrollMap, handleError);
function scrollMap(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
console.log(latitude, longitude)
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
// Scroll the map to center position
}
function handleError(error) {
console.log("error:start-->", error, "<--end")
}
}
}
</script>
</body>
</html>
MDN上標注：
Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.-- link
實際應用時，測試條件下，本地端口localhost:5000/dist,
power by tomcat
- 火狐瀏覽器： 支持；
- edge瀏覽器：支持；
- ie11 ：不支持
- google chrome：不支持
- google chrome + vpn:支持
- ios11 safari ： 支持
- ios13 safari ： 不支持
- 華為自帶瀏覽器：不支持
- 雲之家內嵌瀏覽器：不支持
原生定位接口，是基於瀏覽器定位，會首先優先考慮返回值速度，從而基於IP 或者 WIFI 定位，對於有GPS支持的設備，會消耗更長的時間，定位依賴於瀏覽器，所以兼容性存在不同
地圖廠家公開的接口做了封裝處理，使之兼容性增強，目前測試來看，百度相比較高德地圖在移動端做的兼容性更好。
在開發“獲取當前位置”的需求時，使用高德就遇到了瀏覽器支持，移動端安卓，ios都不支持的情況。 百度到的信息極少。 但也有少數幾篇文章遇到了同樣的問題：
https://www.cnblogs.com/qingpw/p/13048286.html
我的解決方式是先使用高德去嘗試獲取定位信息，獲取不到就用百度的api。 由於公司有和金蝶雲之家合作，雲之家的移動定位做的還是比較穩定的，所以我補了一個雲之家的定位（僅支持從雲之家內調用）
INIT_TEST() {
let _this = this;
AMap.plugin("AMap.Geolocation", function () {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默認：true
enableHighAccuracy: true,
// 設置定位超時時間，默認：無窮大
timeout: 10000,
// 定位按鈕的停靠位置的偏移量，默認：Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后調整地圖視野范圍使定位位置及精度范圍視野內可見，默認：false
zoomToAccuracy: true,
// 定位按鈕的排放位置, RB表示右下
buttonPosition: "lb",
});
geolocation.getCurrentPosition(function (status, result) {
if (status == "complete") {
console.log("resultresultresultresult", result);
onComplete(result);
console.log("gaode");
_this.map.setZoomAndCenter(13, [
result.position.lng,
result.position.lat,
]);
} else {
_this.lib_getPosition();
}
});
function onComplete(data) {
// data是具體的定位信息
}
function onError(data) {
// 定位出錯
}
});
},
lib_getPosition() {
let _this = this;
var BMapGeolocation = new BMap.Geolocation();
BMapGeolocation.getCurrentPosition(function (r) {
if (r.latitude && r.longitude) {
console.log("baidu");
_this.InitPosition.latitude = r.latitude;
_this.InitPosition.longitude = r.longitude;
_this.map.setZoomAndCenter(13, [
r.longitude,
r.latitude,
]);
// console.log(_this.InitPosition);
} else {
getQingJsAPI();
}
function getQingJsAPI() {
console.log("qingjs");
qing.call("getLocation", {
success: function (result) {
_this.InitPosition.latitude = result.data.latitude;
_this.InitPosition.longitude = result.data.longitude;
_this.map.setZoomAndCenter(13, [
result.data.longitude,
result.data.latitude,
]);
// console.log(_this.InitPosition);
},
});
}
});
},
先用高德去嘗試定位，獲取不到 ？ 百度定位 ？（一般都能獲取到了），還不行？ 用雲之家 ！
實際上，從代碼效率上考慮，應該判斷設備，去應用不同的api可能效率更高一些。