前端vue地圖定位并測算當(dāng)前定位離目標(biāo)位置距離可用于簽到打卡,?下載完整代碼請(qǐng)?jiān)L問uni-app插件市場地址:?https://ext.dcloud.net.cn/plugin?id=12974
效果圖如下:
#
#### 使用方法
```使用方法
<!--
// 騰訊地圖key注冊地址（針對(duì)H5端腿倚，manifest.json中web配置，配置定位與地圖 若是微信小程序只需配置微信小程序權(quán)限配置）：
? https://lbs.qq.com/dev/console/application/mine
-->
<!-- scale縮放級(jí)別蚯妇，取值范圍為3-20 longitude：地圖中心精度 latitude：地圖中心緯度 markers:覆蓋物 show-location：是否顯示定位-->
<map class="mapV" :latitude="infoDict.lat"
:longitude="infoDict.lon" scale='6' :markers="covers" show-location=false>
</map>
<!--
? ? ? ? page.json配置以下
// 權(quán)限設(shè)置
"permission": {
"scope.userLocation": {
"desc": "您的位置信息將用于該活動(dòng)簽到"
}
}
-->
```
#### HTML代碼部分
```html
<template>
<view class="content">
<scroll-view class="scrollV" scroll-y="true">
<view class="inputView">
<text class="leftTitle">活動(dòng)內(nèi)容</text>
</view>
<view class="inputView">
{{"去清遠(yuǎn)古龍峽漂流"}}
</view>
<view class="inputView">
<text class="leftTitle">簽到須知</text>
</view>
<view class="inputView">
{{'距離活動(dòng)地10km內(nèi)可簽到成功'}}
</view>
<!--
// 騰訊地圖key注冊地址（針對(duì)H5端敷燎，manifest.json中web配置，配置定位與地圖 若是微信小程序只需配置微信小程序權(quán)限配置）：
? https://lbs.qq.com/dev/console/application/mine
-->
<!-- scale縮放級(jí)別箩言，取值范圍為3-20 longitude：地圖中心精度 latitude：地圖中心緯度 markers:覆蓋物 show-location：是否顯示定位-->
<map class="mapV" :latitude="infoDict.lat" :longitude="infoDict.lon" scale='6' :markers="covers"
show-location=false>
</map>
</scroll-view>
<view class="btnview" @tap="goSignIn">{{'簽到' + distanceStr}}</view>
</view>
</template>
```
#### JS代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
import Vue from 'vue'
export default {
data() {
return {
// 覆蓋物
covers: [],
// 目標(biāo)經(jīng)緯度信息
infoDict: {
'lon': '113.17',
'lat': '23.8'
},
// 我的定位經(jīng)緯度信息
myPinInfo: {},
// 默認(rèn)距離為負(fù)數(shù)
distance: -9999,
distanceStr: ''
}
},
onShow() {
// 獲取當(dāng)前位置
this.getlocation();
},
methods: {
getlocation() {
let myThis = this;
console.log('獲取位置開始');
uni.getLocation({
type: 'gcj02',
success: function(res) {
myThis.myPinInfo = res;
console.log('當(dāng)前位置的經(jīng)度：' + res.longitude);
console.log('當(dāng)前位置的緯度：' + res.latitude);
myThis.covers = [{
latitude: myThis.infoDict.lat,
longitude: myThis.infoDict.lon,
width: 30,
height: 30,
id: 20000,
iconPath: '../../static/activity_pin.png'
},
{
latitude: myThis.myPinInfo.latitude,
longitude: myThis.myPinInfo.longitude,
width: 30,
height: 30,
id: 20001,
iconPath: '../../static/people_pin.png'
}
];
myThis.distance = myThis.getDistance(myThis.infoDict.lat, myThis.infoDict.lon, myThis
.myPinInfo.latitude, myThis.myPinInfo.longitude)
myThis.distanceStr = '(當(dāng)前距離' + myThis.distance + '米)';
}
});
},
// 計(jì)算兩點(diǎn)距離
getDistance(lat1, lng1, lat2, lng2) {
let EARTH_RADIUS = 6378.137;
let radLat1 = this.rad(lat1);
let radLat2 = this.rad(lat2);
let a = radLat1 - radLat2;
let b = this.rad(lng1) - this.rad(lng2);
let 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 * EARTH_RADIUS;
//s = Math.round(s * 10000d) / 10000d;
s = Math.round(s * 10000) / 10000;
s = s * 1000; //乘以1000是換算成米
return s;
},
// 弧度計(jì)算
rad(d) {
return d * Math.PI / 180.0;
},
// 立即簽到
goSignIn(e) {
if (this.distance > 10000) {
uni.showModal({
title: '溫馨提示',
content: '您的當(dāng)前位置距離活動(dòng)目的地太遠(yuǎn), 無法簽到',
showCancel: false
})
return;
} else if (this.distance < 0) {
uni.showModal({
title: '溫馨提示',
content: '您的定位權(quán)限未打開, 請(qǐng)點(diǎn)擊小程序右上角···菜單按鈕, 然后點(diǎn)擊設(shè)置,打開定位權(quán)限',
showCancel: false
})
return
}
},
}
}
</script>
```
#### CSS
```CSS
<style>
.content {
display: flex;
flex-direction: column;
height: 100%;
}
.scrollV {
width: 100vw;
}
.mapV {
width: calc(100vw);
height: 320px;
margin-top: 14px;
}
.leftTitle {
width: 284px;
height: 44px;
line-height: 44px;
font-size: 14px;
color: #333333;
}
.inputView {
flex-direction: row;
display: flex;
height: auto;
align-items: center;
margin-left: 13px;
width: calc(100vw - 30px);
padding: 2px 0px;
font-size: 13px;
color: #666666;
}
.btnview {
display: flex;
background-color: #FF731E;
justify-content: center;
align-items: center;
color: #ffffff;
width: 100%;
height: 50px;
margin-top: 20px;
}
</style>
```
