首先：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
