Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
dc1a6547 1 parent f6d53f94

feat(checkin): 添加打卡功能并优化定位处理 

在详情页添加打卡按钮，实现打卡功能并验证用户定位范围
将用户经纬度信息传递到详情页，优化路由跳转参数
Inline Side-by-side
Showing 2 changed files with 102 additions and 20 deletions
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-22 21:33:41
* @FilePath: /map-demo/src/views/by/info.vue
* @LastEditTime: 2025-08-26 17:21:24
* @FilePath: /map-demo/src/views/checkin/info.vue
* @Description: 文件描述
-->
<template>
......@@ -30,6 +30,7 @@
<van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
<van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
</div>
<div @click="checkIn()" class="info-btn" style="margin-right: 0.75rem;">打卡</div>
<div v-if="page_details.path?.length > 1" @click="goTo()" class="info-btn">前往</div>
<div @click="goToWalk()" class="info-btn">前往</div>
</div>
......@@ -88,12 +89,13 @@
<script setup>
import { ref, watch, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showImagePreview } from 'vant';
import { showImagePreview, showDialog } from 'vant';
import { storeToRefs } from 'pinia'
import audioPlayList from '@/components/audioList.vue'
import { mainStore, useTitle } from '@/utils/generatePackage'
import wx from 'weixin-js-sdk';
import $ from 'jquery';
import AMapLoader from '@amap/amap-jsapi-loader'
import { mapAPI, mapAudioAPI } from '@/api/map.js'
......@@ -120,7 +122,7 @@ watch(
() => props.info,
(v) => {
if (v.details.length) {
page_details.value = { ...v.details[0], position: v.position, path: v.path };
page_details.value = { ...v.details[0], position: v.position, path: v.path, current_lng: v.current_lng, current_lat: v.current_lat };
// 获取浏览器可视范围的高度
$('.info-page').height(props.height + 'px');
}
......@@ -197,12 +199,20 @@ onMounted(async () => {
const raw_list = data.list[0].list; // 获取标记点列表
const marker_id = $route.query.marker_id;
const current_marker = raw_list.filter(item => item.id == marker_id)[0];
// 定位
const current_lng = $route.query.current_lng;
const current_lat = $route.query.current_lat;
//
page_details.value = { ...current_marker.details[0], position: current_marker.position, path: current_marker.path };
// 富文本转义, 分割线样式转换
page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
// 定位
if (current_lng && current_lat) {
page_details.value.current_lng = current_lng;
page_details.value.current_lat = current_lat;
}
// 查询是否有音频列表，打标记点是否有音频
const getAudioList = await mapAudioAPI({ mid: $route.query.id, bid: marker_id });
if (getAudioList.data && getAudioList.data.length) {
......@@ -270,6 +280,11 @@ onMounted(async () => {
wx.updateTimelineShareData(shareData);
// 分享到腾讯微博
wx.onMenuShareWeibo(shareData);
const AMap = await AMapLoader.load({
key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
version: '2.0', // 指定API版本
plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation'] // 必须加载步行导航插件
})
});
// watchEffect(
......@@ -302,9 +317,9 @@ const goTo = () => { // 打开标记地图显示
return;
}
//
if ($router.currentRoute.value.path === '/by/info') { // 详情页
if ($router.currentRoute.value.path === '/checkin/info') { // 详情页
$router.push({
path: '/by',
path: '/checkin',
query: {
id: $route.query.id,
marker_id: $route.query.marker_id
......@@ -320,9 +335,9 @@ const goTo = () => { // 打开标记地图显示
const goToWalk = async () => { // 打开步行导航地图显示
//
if ($router.currentRoute.value.path === '/by/info') { // 详情页
if ($router.currentRoute.value.path === '/checkin/info') { // 详情页
$router.push({
path: '/by',
path: '/checkin',
query: {
id: $route.query.id,
marker_id: $route.query.marker_id
......@@ -343,14 +358,14 @@ const goToWalk = async () => { // 打开步行导航地图显示
const goBack = () => { // 返回首页
$router.push({
path: '/by',
path: '/checkin',
query: {
id: $route.query.id,
}
})
}
const showBack = computed(() => $router.currentRoute.value.path === '/by/info');
const showBack = computed(() => $router.currentRoute.value.path === '/checkin/info');
const voicePause = () => {
audio.value.pause();
......@@ -450,7 +465,7 @@ const onClickAudioList = () => {
if ($('.info-page').height() < $(window).height()) { // 在浮动模式下点击音频列表
// 打开页面
$router.push({
path: '/by/info',
path: '/checkin/info',
query: {
id: $route.query.id,
marker_id: props.info.id,
......@@ -478,6 +493,59 @@ const onStatusAudioList = (status) => { // 音频列表组件，状态改变
// show_audio.value = false;
// }
}
// const checkInRange = (current_lng, current_lat, point_range) => {
// let isPointInRing = AMap.GeometryUtil.isPointInRing([current_lng, current_lat], point_range);
// return isPointInRing
// }
// 现在只有一个地点的经纬度page_details.value?.position, 我现在需要判断我当前经纬度离这个点的距离是否在1km以内
const checkInRange = (current_lng, current_lat, point_range) => {
if (!point_range) return false;
let distance = AMap.GeometryUtil.distance([current_lng, current_lat], point_range);
return distance < 1000;
}
const check_in_status = ref(false);
const checkIn = async () => { // 打卡
if (check_in_status.value) {
show_toast.value = true;
toast_text.value = '您已打卡';
return;
}
// 判断用户是否定位
if (!page_details.value.current_lng || !page_details.value.current_lat) {
show_toast.value = true;
toast_text.value = '请先获取定位';
return;
}
// 判断用户时候在范围内
if (!checkInRange(page_details.value.current_lng, page_details.value.current_lat, page_details.value?.position)) {
show_toast.value = true;
toast_text.value = '您不在打卡范围';
return;
}
if (page_details.value?.position.length) {
// emit("checkIn", {name: '打卡', point: [+page_details.value?.position[0], +page_details.value?.position[1]]});
// 确认打卡
check_in_status.value = true;
// 提示打卡成功
showDialog({
title: '温馨提示',
message: `恭喜您打卡成功`,
confirmButtonText: '去上传图片',
}).then(() => {
// TODO: 后续上传图片页面
});
} else {
show_toast.value = true;
toast_text.value = '该标记点没有关联导航';
}
}
</script>
<style lang="less">
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-08 14:51:23
* @FilePath: /map-demo/src/views/by/map.vue
* @LastEditTime: 2025-08-26 17:01:40
* @FilePath: /map-demo/src/views/checkin/map.vue
* @Description: 公众地图主体页面
-->
<template>
......@@ -27,14 +27,14 @@
:src="data_logo"
/>
</div>
<div @click="scanQrcode" style="position: absolute; bottom: 1rem; left: calc(50% - 2.5rem);">
<!-- <div @click="scanQrcode" style="position: absolute; bottom: 1rem; left: calc(50% - 2.5rem);">
<van-image
width="5rem"
height="5rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan@3x.png"
/>
</div>
</div> -->
<van-config-provider :theme-vars="themeVars">
<van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
......@@ -99,7 +99,7 @@ import $ from 'jquery';
import { useRect } from '@vant/use';
import { mapAPI } from '@/api/map.js'
import wx from 'weixin-js-sdk'
import pageInfo from '@/views/by/info.vue'
import pageInfo from '@/views/checkin/info.vue'
import audioBackground1 from '@/components/audioBackground1.vue'
import { mapState, mapActions } from 'pinia'
import { mainStore } from '@/store'
......@@ -485,6 +485,18 @@ export default {
await this.$nextTick();
this.itemInfo = updatedInfo;
// 写入用户经纬度
if (this.current_lng && this.current_lat) {
this.itemInfo.current_lng = this.current_lng;
this.itemInfo.current_lat = this.current_lat;
} else {
this.itemInfo.current_lng = '';
this.itemInfo.current_lat = '';
// 提示用户获取定位
this.show_toast = true;
this.toast_text = '请先点击左侧按钮获取定位'
}
// 详情为空提示
if (!this.itemInfo.details.length) {
this.show_toast = true;
......@@ -845,7 +857,7 @@ export default {
let marker_id = parseQueryString(result).marker_id;
// 跳转详情页
this.$router.push({
path: '/by/info',
path: '/checkin/info',
query: {
id,
marker_id
......@@ -855,7 +867,7 @@ export default {
});
// 识别率太低
// this.$router.push({
// path: '/by/scan'
// path: '/checkin/scan'
// })
},
onHeightChange ({ height }) { // 监听浮动面板高度变化
......@@ -868,10 +880,12 @@ export default {
// this.changeAudioStatus('pause');
//
this.$router.push({
path: '/by/info',
path: '/checkin/info',
query: {
id: this.$route.query.id,
marker_id: this.itemInfo.id
marker_id: this.itemInfo.id,
current_lng: this.itemInfo.current_lng,
current_lat: this.itemInfo.current_lat,
}
})
} else {
......