安装⼀波（这是为了防⽌出现腾讯地图跨域问题）
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 :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
qq显示地理位置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 = 'apis.map.qq/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.vers[0].latitude, vers[0].longitude, vers[1].latitude,
})
},
//获取当前位置 =》由于腾讯地图获取定位会飘，因此采⽤原⽣获取定位的⽅法。⽬前项⽬应⽤中属于最准确的⼀个，没有之⼀。 getAddress() {
if (location) {
var that = this
var timer = location.watchPosition(
function(ev) { //step3：⽤经纬度描述具体位置
// alert(ds.longitude));
// alert(ds.latitude));
that.bMapTransQQMap(ds.longitude), ds.latitude))
},
function(err) {
alert('定位超时，请稍后再试!')
// de)
// ssage)
/
/清除多次地理位置定位
}, {
/*数据收集 : 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) +
s = s * 6378137.0; // EARTH_RADIUS;
s = und(s * 10000) / 10000;
this.dakajuli = parseFloat(s) },
发布评论