準(zhǔn)備工作：
想要使用地圖SDK及WebService API等產(chǎn)品與服務(wù)遭贸，需要KEY值允扇。點(diǎn)擊跳轉(zhuǎn)到申請(qǐng)地址
靜態(tài)圖的使用：
靜態(tài)圖API之众，對(duì)所有開(kāi)發(fā)者免費(fèi)開(kāi)放盲链。
let shopAddImg = `https://apis.map.qq.com/ws/staticmap/v2/?center=${緯度在前},${經(jīng)度在后}&zoom=17&size=400*400&maptype=roadmap&scale=2&markers=size:large|color:red|${緯度在前},${經(jīng)度在后}&key=${你申請(qǐng)的KEY}`;
需要注意的是：靜態(tài)圖支持返回的圖片尺寸：寬度介于50到1680像素之間蝇率，高度介于50到1200像素之間。超過(guò)該尺寸范圍將不返回圖片刽沾。經(jīng)緯度的順序錯(cuò)誤也不會(huì)返回圖片
默認(rèn)返回圖片具有騰訊地圖標(biāo)志本慕，隱藏方式可以借助overflow:hidden，在圖片放在div盒子里侧漓，圖片大小大于盒子大小锅尘，絕對(duì)定位使圖片居中顯示，超出部分隱藏
.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.創(chuàng)建實(shí)例：
var geolocation = new qq.maps.Geolocation(你的KEY, 你頁(yè)面的名字);
3.定位方式：
詳細(xì)定位：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])
詳細(xì)定位需要在https協(xié)議下執(zhí)行布蔗，會(huì)給用戶發(fā)起授權(quán)信息藤违，用戶授權(quán)后才能獲取到當(dāng)前用戶地址。位置精確纵揍。IP定位在http協(xié)議或https協(xié)議下都可以獲取到用戶地址顿乒，位置不精確，返回?cái)?shù)據(jù)不定泽谨，可能獲取到省信息璧榄，可能獲取到市信息，可能獲取到區(qū)信息隔盛。
獲取兩點(diǎn)之間的距離：
請(qǐng)求接口：?https://apis.map.qq.com/ws/distance/v1/?parameters;
GET請(qǐng)求方式犹菱，返回JSON/JSONP數(shù)據(jù)。需要注意的是：使用axios請(qǐng)求數(shù)據(jù)吮炕，會(huì)出現(xiàn)跨域問(wèn)題腊脱，官方推薦使用JSONP跨域方式。
getDistance() {
????let url = "https://apis.map.qq.com/ws/distance/v1/?parameters
? ? ? ? ?this.$jsonp(url, {
? ? ? ? ?mode: "driving",?
? ??????key: this.TXKEY,?
? ??????callbackName: "QQmap",//回調(diào)函數(shù)名字
? ??????output: "jsonp", //返回?cái)?shù)據(jù)格式
? ??????from: this.userInfo.TXaddress, //起始地址經(jīng)緯度
? ???????to: this.shopInfo.latitude + "," + this.shopInfo.longitude //目的地址經(jīng)緯度
? ??????})
? ??????.then(json => {
????????????if (json.result) { //根據(jù)需求組合數(shù)據(jù)
????????????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 => {});?
????},
跳轉(zhuǎn)到騰訊地圖H5頁(yè)面:
window.open(
????`https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${目的地地址}&tocoord=${目的地緯度},${目的地經(jīng)度}&policy=1&referer=${你頁(yè)面的名字}`
);
