hookehuyr

feat(map): 添加音频功能并优化地图性能

新增音频API调用,支持在点击景点时获取并显示音频信息。同时优化地图性能,添加WebGL参数和瓦片优化策略
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"types": [
"vite/client",
"weixin-js-sdk"
],
"allowJs": true,
"checkJs": true,
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*.js",
"src/**/*.vue",
"src/**/*.json"
],
"exclude": [
"node_modules",
"dist",
"**/__tests__/*"
]
}
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-06 15:04:53
* @LastEditTime: 2025-03-22 21:24:53
* @FilePath: /map-demo/src/views/by/info.vue
* @Description: 文件描述
-->
......@@ -26,7 +26,7 @@
<div style="display: flex; justify-content: space-between;">
<p class="info-title">{{ page_details.name }}</p>
<div style="display: flex;">
<div v-if="page_details.audio" @click="onClickAudioList" style="margin-right: 0.75rem;">
<div v-if="page_details.show_audio" @click="onClickAudioList" style="margin-right: 0.75rem;">
<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>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-06 15:57:00
* @LastEditTime: 2025-03-22 21:23:42
* @FilePath: /map-demo/src/views/by/map.vue
* @Description: 公众地图主体页面
-->
......@@ -105,6 +105,7 @@ import { mapState, mapActions } from 'pinia'
import { mainStore } from '@/store'
import { parseQueryString } from '@/utils/tools'
import AMapLoader from '@amap/amap-jsapi-loader'
import { mapAudioAPI } from '@/api/map.js'
const GPS = {
PI: 3.14159265358979324,
......@@ -408,6 +409,14 @@ export default {
features: ['bg', 'road'], // 设置地图上显示的元素种类
animateEnable: false, // 地图平移过程中是否使用动画
resizeEnable: true,
WebGLParams: { // 新增WebGL优化参数
preserveDrawingBuffer: true,
antialias: true,
stencil: true,
alpha: true
},
optimizeTileStrategy: true, // 开启瓦片优化
autoRendering: false // 关闭自动渲染
});
// 添加地图点击事件
this.map.on("click", this.showInfoClick);
......@@ -444,7 +453,7 @@ export default {
textMarker.off('click', clickListener)
}
// 绑定景点的点击事件 - 文字出现才能触发
var clickListener1 = textMarker.on('click', (e) => {
var clickListener1 = textMarker.on('click', async (e) => {
// 还原样式
this.markerSum.forEach(item => {
if (e.target.hS !== item.hS) {
......@@ -459,8 +468,18 @@ export default {
// textMarker.setText('样式已修改');
//
// console.warn(e);
this.itemInfo = entity_info[i];
// 先获取音频信息
const { data, code } = await mapAudioAPI({ mid: this.$route.query.id, bid: entity_info[i].id });
// 创建新的对象并设置音频状态
const updatedInfo = JSON.parse(JSON.stringify(entity_info[i]));
if (data.length && updatedInfo.details && updatedInfo.details[0]) {
updatedInfo.details[0].show_audio = true;
}
// 使用 nextTick 确保视图更新
await this.$nextTick();
this.itemInfo = updatedInfo;
// 详情为空提示
if (!this.itemInfo.details.length) {
......@@ -469,7 +488,6 @@ export default {
return;
}
// 打开浮动面板
this.info_height = (0.65 * window.innerHeight);
// 浮动面板样式
......