#高德地图api移动端定位失败解决方案 #H5 原生Geollocation接口Chomre浏览器的坑
侧重：本文探索了 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可能效率更高一些。
