首先：https://lbs.qq.com/miniProgram/plugin/pluginGuide/routePlan 這是騰訊地圖地址
安裝一波（ 這是為了防止出現騰訊地圖跨域問題 ）
npm i --save vue-jsonp
在 main.js 文件
// 引入騰訊地圖
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)
manifest.json 文件開始配置
復制進去就行
搜索：usingComponents "plugins": { "routePlan": { "version": "1.0.12", "provider": " 小程序的APPID " } }, "permission": { "scope.userLocation": { "desc": "位置信息效果展示" } }
配置上自己的小程序appid
配置上去騰訊地圖創建的key
最后，在應用的文件
<!-- :polyline="polyline" --> //點 連城線，需要的可以自己配置 <map style="width: 100%; height: 300px;" :circles="circles" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers"> <!-- <cover-view class="cover-view" @click="onControltap"></cover-view> --> </map>
data定義 顯示默認定位
// title: 'map',
latitude: 22.571164, // 默認的經緯度
longitude: 113.926937,
covers: [{
// 開始的經緯度
latitude: 22.573164, //緯度
longitude: 113.926937, //經度
// #ifdef APP-PLUS
iconPath: '../../../static/image/location@3x.png', //顯示的圖標
// #endif
// #ifndef APP-PLUS
iconPath: '../../../static/location.png', //顯示的圖標
// #endif
// title: '阿打算', //標注點名
label: {
//為標記點旁邊增加標簽
// content: '文本1', //文本
color: '#F76350', //文本顏色
// anchorX: 0, //label的坐標，原點是 marker 對應的經緯度
// anchorY: -80, //label的坐標，原點是 marker 對應的經緯度
bgColor: '#fff', //背景色
padding: 5, //文本邊緣留白
borderWidth: 1, //邊框寬度
borderColor: '#D84C29', //邊框顏色
textAlign: 'right' //文本對齊方式。
},
callout: {
content: '當前所在',
color: '#F76350',
fontSize: 12
}
},
{
// 圓圈所在的點 =》 終點
latitude: 22.57147,
longitude: 113.92663,
// #ifdef APP-PLUS
iconPath: '../../../static/image/location@3x.png', //顯示的圖標
// #endif
// #ifndef APP-PLUS
iconPath: '../../../static/location.png', //顯示的圖標
// #endif
// iconPath: '../../static/image/personal_center.png',
// title: '阿迪達斯',
// x: 39.9,
// y: 116.399,
label: {
// content: '打卡范圍',
color: '#F76350',
bgColor: '#fff',
padding: 5,
borderRadius: 4
},
callout: {
content: '打卡范圍',
color: '#F76350',
fontSize: 12
}
}
],
scale: 15, //地圖層級
// controls: [{
// //在地圖上顯示控件，控件不隨着地圖移動
// id: 1, //控件id
// // iconPath: '../../static/image/equipment_deployment_two.png', //顯示的圖標
// position: {
// //控件在地圖的位置
// left: 15,
// top: 15,
// width: 50,
// height: 50
// }
// }],
//在地圖上顯示圓
circles: [{
latitude: 22.57147,
longitude: 113.92663,
fillColor: '#AACCEE32', //填充顏色
color: '#AACCEE', //描邊的顏色
radius: 100, //半徑
strokeWidth: 2 //描邊的寬度
}],
// polyline: [{ //根據點畫線
// //指定一系列坐標點，從數組第一項連線至最后一項 => 第一個輸入開始點， 第二個輸入結束點
// // points: [{ latitude: 22.57147, longitude: 113.92663 }, { latitude: 22.57091694019413, longitude: 113.9270532131195 }],
// points: [],
// color: '#0000AA', //線的顏色
// width: 2, //線的寬度
// dottedLine: true, //是否虛線
// arrowLine: true //帶箭頭的線 開發者工具暫不支持該屬性
// }]
methods 方法 /=
//坐標轉騰訊地圖坐標
bMapTransQQMap(lng, lat) {
let locationObj = lat + ',' + lng;
let url = 'https://apis.map.qq.com/ws/coord/v1/translate';
var that = this
this.$jsonp(url, {
key: 'KKSBZ-53WRP-GBSD7-LE373-SGAQO-6UB7I',
locations: locationObj,
type: 1,
output: 'jsonp'
}).then(res => {
that.latitude = res.locations[0].lat
that.longitude = res.locations[0].lng
that.covers[0].latitude = res.locations[0].lat
that.covers[0].longitude = res.locations[0].lng
//判斷是否在規定打卡距離以內
that.GetDistance(that.covers[0].latitude, that.covers[0].longitude, that.covers[1].latitude,
that.covers[1].longitude)
})
},
//獲取當前位置 =》 由於騰訊地圖獲取定位會飄，因此采用原生獲取定位的方法。目前項目應用中屬於最准確的一個，沒有之一。
getAddress() {
if (navigator.geolocation) {
var that = this
var timer = navigator.geolocation.watchPosition(
function(ev) { //step3：用經緯度描述具體位置
// alert(parseFloat(ev.coords.longitude));
// alert(parseFloat(ev.coords.latitude));
that.bMapTransQQMap(parseFloat(ev.coords.longitude), parseFloat(ev.coords.latitude))
},
function(err) {
alert('定位超時，請稍后再試!')
// alert(err.code)
// alert(err.message)
//清除多次地理位置定位
navigator.geolocation.clearWatch(timer);
}, {
/*數據收集 : json的形式
enableHighAcuracy : 更精確的查找，默認false
timeout :指定獲取地理位置的超時時間，默認不限時，單位為毫秒
maximumAge :最長有效期，在重復獲取地理位置時，此參數指定多久再次獲取位置。
*/
enableHighAccuracy: true,
maximumAge: 2000
})
} else {
alert('您的瀏覽器不支持geolocation定位！,請更換瀏覽器');
}
},
// 方法定義 lat,lng 計算距離
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 * 6378137.0; // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
this.dakajuli = parseFloat(s)
},
騰訊地圖坐標轉換API： https://lbs.qq.com/service/webService/webServiceGuide/webServiceTranslate
