gas-station-ticket-uniapp-240822/pages/map/map.vue

<template>
	<view class="content">
		<map style="width: 100%; height: 90vh;" 
		:layer-style='5' 
		:style="{height:mapheight}" 
		:show-location='true'
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="markers" 
		:scale="scale" 
		@markertap="markertap"
		@callouttap='callouttap'>

			<!-- subkey="66c5a2ad2849" -->
		</map>
	</view>
</template>

<script>
	import position from '@/utils/position.js'
	export default {
		data() {
			return {
				latitude: 23.106574, //纬度
				longitude: 113.324587, //经度
				scale: 10, //缩放级别
				bottomData: false,
				mapCtx: null,
				markers:[
					{ //标记点A 的信息
						iconPath: "/static/logo.png",  //图标
						id: 0,
						width: 20, //图标icon 宽度
						height: 28 ,//图标icon 高度
						latitude: 26.1272,
						longitude: 113.11659
					}
				]
			}
		},
		onLoad() {
			position.getLocation(res => {
				console.log(res);
				this.latitude = res.latitude
				this.longitude = res.longitude
			})
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		onShow() {
			this.mapCtx = wx.createMapContext('map');
			this.mapCtx && this.mapCtx.addCustomLayer({
				layerId: '66c5a2ad2849',
				success: (res) => {
					console.log('success', res);
				},
				fail: (e) => {
					console.log('fail', e);
				},
			});
		},
		methods: {
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			}
		}
	}
</script>