浏览器H5定位即navigator.geolocation,通过IP或者域名的形式,如:http://172.21.3.82:8080 和http://b.cunzhang.com进行访问时,调用navigator.geolocation.getCurrentPosition,打开控制台,你会发现有以下错误信息:
Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
“只有在安全来源的情况才才被允许”。错误信息里还包含了一个提示链接,我们不妨打开这个
链接https://goo.gl/Y0ZkNV)看看。原来,为了保障用户的安全,Chrome浏览器认为只有安全的
来源才能开启定位服务。那什么样才算是安全的来源呢?在打开链接的页面上有这么一段话:
“Secure origins” are origins that match at least one of the following (scheme, host, port) patterns:(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
This list may be incomplete, and may need to be changed. Please discuss!
大概意思是说只有包含上述列表中的scheme、host或者port才会被认为是安全的来源,现在这个列表还不够完整,后续可能还会有变动,有待讨论。
如果需要在域名访问的基础上实现地位位置的定位,那我们只能把http协议升级为https了。
html>
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
地图展示// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 30);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//添加地图类型控件
map.setCurrentCity("北京");
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
point = r.point;
console.log(r.point.lng + ',' + r.point.lat);
alert('您的位置:' + r.point.lng + ',' + r.point.lat);
getName(point);
}
else {
alert('failed' + this.getStatus());
}
}, { enableHighAccuracy: true })
function callback(data) {
console.log(data);
console.log('转化后:'+data.points[0].lng + ',' + data.points[0].lat);
alert('您的真实位置:' + data.points[0].lng + ',' + data.points[0].lat);
var newpoint = new BMap.Point(data.points[0].lng, data.points[0].lat);
var mk = new BMap.Marker(newpoint);
map.addOverlay(mk);
map.panTo(newpoint);
getName(newpoint);
}
function getName(point) {
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
console.log(addComp);
alert(addComp.province + ", " + addComp.city + ", " +
addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
}
//浏览器H5定位
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
//得到html5定位结果
var x = position.coords.longitude;
var y = position.coords.latitude;
console.log(position.coords);
alert('您的位置:' + x + ',' + y);
//由于html5定位的结果是国际标准gps,所以需要转为百度坐标系,from=1,
to=5
var newpoint = new BMap.Point(x, y);
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(newpoint);
convertor.translate(pointArr, 1, 5, callback)
}, function (e) {
console.log(e);
alert(e.message);
})
} else {
alert("没有定位权限");
}
在https站点下,通过对比我们发现百度api获取的坐标和浏览器H5经过坐标转换获得的坐标是一致的。所以要想在浏览器中通过百度api获取精确的定位,最好把站点升级为https协议。