准备工作：
想要使用地图SDK及WebService API等产品与服务，需要KEY值。点击跳转到申请地址
静态图的使用：
静态图API，对所有开发者免费开放。
let shopAddImg = `https://apis.map.qq.com/ws/staticmap/v2/?center=${纬度在前},${经度在后}&zoom=17&size=400*400&maptype=roadmap&scale=2&markers=size:large|color:red|${纬度在前},${经度在后}&key=${你申请的KEY}`;
需要注意的是：静态图支持返回的图片尺寸：宽度介于50到1680像素之间，高度介于50到1200像素之间。超过该尺寸范围将不返回图片。经纬度的顺序错误也不会返回图片
默认返回图片具有腾讯地图标志，隐藏方式可以借助overflow:hidden，在图片放在div盒子里，图片大小大于盒子大小，绝对定位使图片居中显示，超出部分隐藏
.map-Banner {
width: 100%;
height: 2.8rem;
position: relative;
overflow: hidden;
img {
width: 7.5rem;
height: 7.5rem;
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
margin: auto;
}
}
前端组件获取用户地址:
1.引入js：https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js
2.创建实例：
var geolocation = new qq.maps.Geolocation(你的KEY, 你页面的名字);
3.定位方式：
详细定位：getLocation(sucCallback, errCallback, [options: {timeout: number, failTipFlag: boolean}])
getMyLocation() {
geolocation.getLocation(position => {
this.userInfo.TXaddress = position.lat + "," + position.lng;
this.userInfo.GDaddress = position.lng + "," + position.lat;
this.getDistance();
}, null);
},
IP定位：getIpLocation(sucCallback, [errCallback])
详细定位需要在https协议下执行，会给用户发起授权信息，用户授权后才能获取到当前用户地址。位置精确。IP定位在http协议或https协议下都可以获取到用户地址，位置不精确，返回数据不定，可能获取到省信息，可能获取到市信息，可能获取到区信息。
获取两点之间的距离：
请求接口： https://apis.map.qq.com/ws/distance/v1/?parameters;
GET请求方式，返回JSON/JSONP数据。需要注意的是：使用axios请求数据，会出现跨域问题，官方推荐使用JSONP跨域方式。
getDistance() {
let url = "https://apis.map.qq.com/ws/distance/v1/?parameters
this.$jsonp(url, {
mode: "driving",
key: this.TXKEY,
callbackName: "QQmap",//回调函数名字
output: "jsonp", //返回数据格式
from: this.userInfo.TXaddress, //起始地址经纬度
to: this.shopInfo.latitude + "," + this.shopInfo.longitude //目的地址经纬度
})
.then(json => {
if (json.result) { //根据需求组合数据
let res = json.result.elements[0];
this.arriveDis = (res.distance / 1000).toFixed(1);
this.arriveTime = Math.ceil(res.duration / 60);
this.showDistance = true;
}
})
.catch(err => {});
},
跳转到腾讯地图H5页面:
window.open(
`https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${目的地地址}&tocoord=${目的地纬度},${目的地经度}&policy=1&referer=${你页面的名字}`
);
