使用方式：（这里是在vue中使用的方式）
1.在index.html文件中引入
<script type="text/javascript"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=you key"></script>
这里的key是在腾讯api官方申请的！！
-
在要使用的组件中使用
const myLatlng = new qq.maps.LatLng(39.916527, 116.397128);//中心坐标点 this.map = new qq.maps.Map(document.getElementById("container"), myOptions);这个方法创建地图；
//这个对象中是对地图样式的设置
const myOptions = {
zoom: 15, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
zoomControl:false,
panControl: false,
mapTypeControl: false,
};
//获取dom元素添加地图信息
this.map = new qq.maps.Map(document.getElementById("类名"), myOptions);
const qqMapPosition = new qq.maps.Geolocation('you key','myName');
qqMapPosition.getLocation(this.sucCallback, this.showErr, options);//开启定位
这个方法是腾讯地图提供的定位方法！！
在这里腾讯地图有个坑，腾讯地图会自动做缓存是为了节省用户流量，所以即使已经退出组件或者退出程序还是会被缓存。
解决办法：
1.杀死微信重新进入
2.清理微信缓存
当然这不是最好的解决办法，为了解决每次进来可能使用的是腾讯地图上次的缓存，所有最后使用了腾讯地图提供的监视方法
qqMapPosition.watchPosition(this.showwatchPosition);//开启监控
qqMapPosition.clearWatch();//关闭监控
这个方法是腾讯地图提供的监视方法！！
这里说明：
定位方法会有两个回调函数：
1.成功的回调（this.sucCallback）这个方法返回的是用户当前位置的经纬度
和地址名称等信息
//定位成功回调
sucCallback(position){
this.latitude = position.lat; //纬度
this.longitude = position.lng; //经度
this.city = position.city;
this.seat = position.city + position.addr; //名称
this.setMap(); //这个方法是重新绘制地图标注等信息的
},
2.失败的回调（this.showErr）
//定位失败的回调
showErr() {
console.log("定位失败，请检查是否打开定位")
},
监视的方法只有一个回调：
成功的回调（this.showwatchPosition）这个方法返回的是用户当前位置的经维度和地址名称等信息
//监视位置是否变化
showwatchPosition(position) {
this.GetDistance这个方法是计算上次位置和这次的位置差的，目地是因为监视这个方法调用的非常频繁，为了避免频繁的重绘重排导致卡顿，所以设置大于10米在换。
const number = parseInt(this.GetDistance(this.latitude,this.longitude,position.lat,position.lng)*1000)
//距离上次位置大于10米就重新绘制标注
if (number > 10 ) {
console.log('距离上次位置'+number+'米');
this.latitude = position.lat;
this.longitude = position.lng;
this.city = position.city;
this.seat = position.city + position.addr;
this.setMap(); //这个方法是重新绘制地图标注等信息的
}
}
计算位置的方法：
//计算两点之间的距离
GetDistance( lat1, lng1, lat2, lng2){
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
},
这个方法计算的值是千米（KM）!!
说明一下四个参数是什么意思：
1：起点的维度
2：起点的经度
3：结束点的维度
4：结束点的经度
绘制地图标注等信息的：
//改变地图上的标注，圈，线
setMap() {
这三个判断是把之前创建的标注等信息给清除不然会一直叠加!!
if (this.marker) {
this.marker.setMap(null);
}
if (this.circle) {
this.circle.setMap(null);
}
if (this.polyline) {
this.polyline.setMap(null);
}
//设置地图中心点
const myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
this.map.panTo(myLatlng); //每次拿到新的经纬度直接移动到对应的位置
//设置标注的参数
const anchor = new qq.maps.Point(10, 30),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
设置图标的样式
icon = new qq.maps.MarkerImage(
markers，//图标的路径，在外面已经引用好了，可以不给使用原生
size,
origin,
anchor
);
//给定位的位置添加图片标注
this.marker = new qq.maps.Marker({
position: myLatlng,//把标注放的位置
map: this.map,//把标注给到地图
visible: true,
});
this.marker.setIcon(icon); //加上会使用自己定义的图标，不加用原生的
//判断用户是否有打卡地点
if (this.center.lng) {
const center = new qq.maps.LatLng(this.center.lat,this.center.lng);
const radius = this.center.radius;
//绘制圆圈
this.circle =new qq.maps.Circle({
map: this.map,
center: center,
radius: radius,
fillColor: new qq.maps.Color(164,233,187, 0.7),
strokeColor: "#a4e9bb",
strokeWeight: 1
});
//绘制线
const path = [
myLatlng,//起点位置
center //终点位置
];
this.polyline = new qq.maps.Polyline({
//折线是否可点击
clickable: false,
//折线是否可编辑
editable: false,
map: this.map,
//折线的路径
path: path,
//折线的颜色
strokeColor: '#5A74DB',
//折线的样式
strokeDashStyle: 'solid',
//折线的宽度
strokeWeight: 5,
//折线末端线帽的样式
strokeLinecap: 'square',
//折线是否可见
visible: true,
//折线的zIndex
zIndex: -100
});
}
}
最后记录一下我遇到的坑，被困了很久才找到原因。
虽然每次进入都会开启监视但是因为监视这个方法是在new之后调用，(个人感觉是因为页面加载完成之后没有执行腾讯地图内部的js)导致第一次进入是无效的，所以我最后把newqq.maps.Geolocation('youkey','myName');这个方法挂在Vue的实例上，做到提前加载，这样每次使用的时候就不会出现第一次执行不成功。
我在腾讯地图提供的dom上亲测(想试一下的可以直接复制下面的代码替换到script)：
var geolocation = new qq.maps.Geolocation("you ke", "myName");
document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
* 直接调用
*showWatchPosition();
*这个方法第一次是不会继续监视的
window.onload = function () {
showWatchPosition();
}
var positionNum = 0;
var options = {timeout: 8000};
function showPosition(position) {
console.log('定位成功')
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() {
console.log('开始监听位置！')
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;
};
