Jingde-town-wechat-uniapp/pages/index/tourGuide.vue

<template>
	<view class="page">
		<!-- <map 
		style="width: 100%;height: 700rpx" 
		:layer-style='5' 
		:show-location='true'
		:latitude="latitude" 
		:longitude="longitude" 
		:markers="markers" 
		:scale="scale" 
		@markertap="markertap"
		@callouttap='callouttap'>
		</map> -->
		
		<locations
		:spotGuide="spotGuide"
		:spotGuideMarkers="spotGuideMarkers"
		:area="area"
		/>
		
		<tabber select="1"/>
	</view>
</template>

<script>
	import position from '@/utils/position.js'
	import locations from '@/components/tourGuide/locations.vue'
	import { mapState, mapGetters } from 'vuex'
	export default {
		components : {
			locations,
		},
		data() {
			return {
				// latitude: 23.106574, //纬度
				// longitude: 113.324587, //经度
				// scale: 12, //缩放级别
				// bottomData: false,
				// mapCtx: null,
				// markers:[
				// 	// { //标记点A 的信息
				// 	// 	iconPath: "/static/logo.png",  //图标
				// 	// 	id: 0,
				// 	// 	width: 20, //图标icon 宽度
				// 	// 	height: 28 ,//图标icon 高度
				// 	// 	latitude: 26.1272,
				// 	// 	longitude: 113.11659
				// 	// }
				// ],
				area : [],
			}
		},
		onLoad(args) {
			if(args.areaId){
				this.$store.commit('setAreaId', args.areaId)
			}else{
				this.$store.commit('setAreaId', this.spotList[0].areaId)
			}
		},
		onShow(){
		},
		computed: {
			...mapGetters(['spotGuide', 'spotGuideMarkers']),
			...mapState(['areaId', 'spotList']),
		},
		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);
			// 	},
			// });
			this.queryAreaListById()
		},
		methods: {
			queryAreaListById(){
				this.$api('queryAreaListById', {
					areaId : this.areaId
				}, res => {
					if(res.code == 200){
						this.area = res.result
					}
				})
			},
			//地图点击事件
			markertap(e) {
				console.log("===你点击了标记点===", e)
				this.markers.forEach(n => {
					if(n.id == e.detail.markerId){
						uni.openLocation({
							latitude: n.latitude,
							longitude: n.longitude,
						})
					}
				})
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},
			random(){
				let list = []
				for(let i = 0;i < 10;i++){
					let a = uni.$uv.random(1, 4)
					let obj = {
						latitude: this.latitude + uni.$uv.random(1, 30) / 1000 * (uni.$uv.random(1, 3) - 2),
						longitude: this.longitude + uni.$uv.random(1, 30) / 1000 * (uni.$uv.random(1, 3) - 2),
						width: 20, //图标icon 宽度
						height: 28 ,//图标icon 高度
						iconPath: `/static/image/tourGuide/${a}.png`,  //图标
						id: i,
					}
					list.push(obj)
				}
				this.markers = list
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
}
</style>