一、HTML5 geolocation的属性
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(onSuccess , onError);
}else{
alert(“您的浏览器不支持使用HTML 5来获取地理位置服务”);
}
//定位数据获取成功响应
function onSuccess(position){
alert('纬度: ’ + position.coords.latitude + ‘\n’ +
'经度: ’ + position.coords.longitude + ‘\n’ +
'海拔: ’ + position.coords.altitude + ‘\n’ +
'水平精度: ’ + position.coords.accuracy + ‘\n’ +
'垂直精度: ’ + position.coords.altitudeAccura)
}
//定位数据获取失败响应
function onError(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;
}
}
二、百度地图api定位
(1)HTML
因为是通过react,所以在html中需要定义一个全局的BMap对象
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxx"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
window.BMap = BMap
</script>
(2)jsx
let BMap = window.BMap
let geolocation = new BMap.Geolocation()
geolocation.enableSDKLocation(); //允许SDK辅助
geolocation.getCurrentPosition(function (r) {
if(this.getStatus() == 0){
console.log(r)
}
})
(3)成功后返回结果
三 、腾讯地图api定位
(1)HTML
window.addEventListener(‘message’, function(event) {
// 接收位置信息
var loc = event.data;
console.log(‘location’, loc);
}, false) ;
setTimeout(function() {
if (!_this.loc) {
console.log(‘定位超时’)
}
}, 6000) // 6s为推荐值,业务调用方可根据自己的需求设置改时间,不建议太短
(3)成功后返回结果
百度地图api定位有偏差,腾讯地图定位相对比较准