腾讯地图使用心得

使用方式：（这里是在vue中使用的方式）

1.在index.html文件中引入

这里的key是在腾讯api官方申请的！！

2. 在要使用的组件中使用new qq.maps.LatLng(39.916527, 116.397128);这个方法创建地图；

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

我最后把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;

};