travel-applet/pages/map/index.vue

<template>
	<view class="main">
		<map class="map" :latitude="config.latitude" :longitude="config.longitude" :scale="config.scale"
			:markers="markers" @callouttap="toTap"></map>
	</view>
</template>

<script>
	let innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				config: {},
				markers: []
			}
		},
		onShow: async function() {
			const that = this;
			that.searchConfig();
			that.search();
		},
		onHide: function(e) {
			innerAudioContext.destroy(); //销毁这个实例
		},
		methods: {
			async searchConfig() {
				const that = this;
				const res = await that.$api(`/config`, 'GET', {})
				if (res.errcode == '0') {
					that.$set(that, `config`, res.data)
				} else {
					uni.showToast({
						title: res.errmsg,
					});
				}
			},
			// 查询
			async search() {
				const that = this;
				let info = {
					is_use: '0',
				}
				let res;
				res = await that.$api(`/map`, 'GET', {
					...info,
				});
				if (res.errcode == '0') {
					for (let [index, item] of res.data.entries()) {
						item.id = index
					}
					that.$set(that, `markers`, res.data);
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					})
				}
			},
			// 点击标记点对应的气泡 播放多种语音类型的讲解
			async toTap(e) {
				const that = this;
				const markerId = e.detail.markerId
				const marker = that.markers[markerId]
				let src;
				if (marker && marker.audio && marker.audio.length > 0) src = marker?.audio[0]?.url
				innerAudioContext.destroy(); //销毁这个实例
				innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.sessionCategory = "soloAmbient"
				innerAudioContext.src = src
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					uni.showToast({
						title: res.errMsg,
						icon: 'error',
						duration: 2000
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.map {
			width: 100%;
			height: 100vh;

			.button {
				background-color: var(--f3CColor);
			}
		}
	}
</style>