travel-applet/pages/map/index.vue

<template>
	<view class="main">
		<map class="map" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 43.3517, // 设置地图的纬度
				longitude: 125.86854, // 设置地图的经度
				scale: 13,
				covers: [{
					id: 0,
					latitude: 43.34931,
					longitude: 125.87221,
					width: 20, //宽
					height: 30, //高
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '吊水壶森林公园', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#e51860', //背景颜色
						display: 'ALWAYS', //常显
					},
				}, {
					id: 1,
					latitude: 43.34526,
					longitude: 125.85224,
					width: 20, //宽
					height: 30, //高
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: '公厕', //文本
						color: '#ffffff', //文字颜色
						fontSize: 14, //文本大小
						borderRadius: 15, //边框圆角
						borderWidth: '10',
						bgColor: '#e51860', //背景颜色
						display: 'ALWAYS', //常显
					},
				}]
			}
		},
		methods: {

		}
	}
</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>