电脑端 一定要放在 https域名下 否者定位不准确
手机定位的话直接用就行了 定位很准确的
以下代码直接用就ok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=GJNBZ-PMO64-C3PUZ-XFSPG-L7RXO-7FBSD"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body,
button,
input,
select,
textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
#container {
min-width: 600px;
min-height: 767px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
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;
}
}
var geolocation = new qq.maps.Geolocation("GJNBZ-PMO64-C3PUZ-XFSPG-L7RXO-7FBSD", "myapp");
var positionNum = 0;
var options = {
timeout: 15000
};
var geocoder;
var latLng;
function showPosition(position) {
let latitude = position.lat;
let longitude = position.lng;
// 逆地址解析(经纬度到地名转换过程)
geocoder = new qq.maps.Geocoder({
complete: function(res) {
console.log(res);
// 标志位置
var center = new qq.maps.LatLng(latitude, longitude);
var map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
//创建标记
var marker = new qq.maps.Marker({
position: center,
map: map
});
//添加到提示窗
var info = new qq.maps.InfoWindow({
map: map
});
//获取标记的点击事件
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">' + res.detail.address + '</div>');
info.setPosition(center);
});
}
});
latLng = new qq.maps.LatLng(latitude, longitude);
geocoder.getAddress(latLng);
// geocoder.setComplete(function(res) {
// });
};
function showErr() {
console.log('定位失败');
}
geolocation.getLocation(showPosition, showErr, options);
</script>
</body>
</html>