在微信内使用定位功能,如果能借助到微信app自身的定位优势,定位才能更加精准。注意:使用定位,摄像头,声音等都需要通过https协议访问网站。
1. 使用原生接口Geolocation
var options = {
enableHighAccuracy: true, //true为高精度,但耗电量增加
timeout: 5000, //超时时间必填,否则默认为无穷大
maximumAge: 0 //位置的缓存时间,默认0即不缓存
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
console.log('More or less ' + crd.accuracy + ' meters.');
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
注意:这种方式只能获取wgs84的坐标,如果想在腾讯地图中显示则需要转换成火星坐标gcj02;还有一个大坑,返回的位置是Coordinates 对象,使用JSON.stringify时返回的是空的"{}",解决方法是JSON.stringify($.extend({},position))。
2.使用微信JS-SDK
获取地理位置接口
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});
优点是借用了微信的定位功能,定位更精准了,可以指定坐标类型了,但缺点是需要有公众号及其开发经验。
3.使用腾讯地图的前端定位组件
此组件更为强大,同样使用了微信的定位功能,但又不需要微信服务号,返回的字段更详细,还提供了IP定位,监听位置信息的改变等功能(并且微信之外也能用)。
这里需要用到开发密钥,注册地址如下:
先直观的来段json,展示一下有哪些字段吧:
{
"module": "geolocation",
"type": "cache",
"adcode": "310101", //行政区ID,六位数字, 前两位是省,中间是市,后面两位是区
"nation": "中国",
"province": "上海市",
"city": "上海市",
"district": "黄浦区",
"addr": "黄浦区延安高架路(大世界地铁站西北)",
"lat": 31.228474, //火星坐标(gcj02),腾讯、Google、高德通用
"lng": 121.478224,
"accuracy": 600 //误差范围,以米为单位
}
是不是一下就把前面的都比下去了。下面提供一个完整示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端定位模块</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#pos-area {
background-color: #009DDC;
margin-bottom: 10px;
width: 100%;
overflow: scroll;
text-align: left;
color: white;
}
#demo {
padding: 8px;
font-size: small;
}
#btn-area {
height: 100px;
}
button {
margin-bottom: 10px;
padding: 12px 8px;
width: 42%;
border-radius: 8px;
background-color: #009DDC;
color: white;
}
</style>
<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
</head>
<body>
<div id="pos-area">
<p id="demo">点击下面的按钮,获得对应信息:<br /></p>
</div>
<div id="btn-area">
<button onClick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</button>
<button onClick="geolocation.getIpLocation(showPosition, showErr)">获取粗糙定位信息</button>
<button onClick="showWatchPosition()">开始监听位置</button>
<button onClick="showClearWatch()">停止监听位置</button>
</div>
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation("key必填,开发密钥", "referer必填,调用来源");
document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
var positionNum = 0;
var options = {timeout: 8000};//定位的超时时间,默认值为10s
function showPosition(position) {
positionNum ++;
document.getElementById("demo").innerHTML += "序号:" + positionNum;
document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showErr() {
positionNum ++;
document.getElementById("demo").innerHTML += "序号:" + positionNum;
document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败!";
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showWatchPosition() {
document.getElementById("demo").innerHTML += "开始监听位置!<br /><br />";
geolocation.watchPosition(showPosition);
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showClearWatch() {
geolocation.clearWatch();
document.getElementById("demo").innerHTML += "停止监听位置!<br /><br />";
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
</script>
</body>
</html>
总结:微信里定位就选腾讯地图吧,而且也是小程序的不二选择呀。