腾讯地图初体验

使用方式：（这里是在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官方申请的！！

2. 在要使用的组件中创建地图

const myLatlng = new qq.maps.LatLng(39.916527, 116.397128);//中心坐标点
//这个对象中是对地图样式的设置
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);

3.腾讯地图提供的定位方法

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)导致第一次进入是无效的，所以

我最后把new qq.maps.Geolocation('you key','myName');这个方法挂在Vue的实例上，做到提前加载，这样每次使用的时候就不会出现第一次执行不成功。

我在腾讯地图提供的dom上亲测(想试一下的可以直接复制下面的代码替换到script)：

var geolocation = new qq.maps.Geolocation("WJTBZ-C4AEX-N2X4U-TFBBX-TAU37-XXXXXX", "xxxxxxxxxxx");

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;
};