SFH5/pages/book/map.vue

<template>
	<div class="map" id="map">
		  <!-- #ifdef H5  -->
				      <!-- <GoogleMap
				       		ref="googleMap"
				       		api-key="AIzaSyC95SewUgAsDlcERNpJGxb845VoFGkAU2c"
				       		style="width: 100%; height: 100%"
				       		:center="center"
				       		:zoom="15"
				       			>
				       			<CustomMarker v-for="(item,index) in props.markerList" :key='index' :options="{ position: item }">
				       				<div class='markerBox' @click="markerClick(item,index)">
				       					<div class="text">{{item.name}}</div>
				       					<div class="circle"></div>
				       				</div>
				       			</CustomMarker>
				       </GoogleMap> -->
			<!-- #endif -->
		<!-- #ifdef MP-WEIXIN  -->
			<!-- <map style="width: 100%; height: 100%;" @markertap='markertap' :latitude="center.lat" :longitude="center.lng"  :markers="WeixinMarkerList">
			</map> -->
		<!-- #endif -->
		<map style="width: 750rpx; height: 100%;" :scale="3" @markertap='markertap' :latitude="center.lat" :include-points="includePoints" :show-location="true" :longitude="center.lng"  :markers="WeixinMarkerList">
		</map>
	</div>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { wgs84ToGcj02 } from '@/utils/map.js'
	import {
		ref, watch,watchEffect 
	} from 'vue';	
	// #ifdef H5
	import { GoogleMap,CustomMarker } from 'vue3-google-map';
	// #endif
	// onLoad(()=>{
	// 	uni.hideTabBar()
	// })
	const includePoints = ref([]) //缩放视野以包含所有给定的坐标点
	const emit = defineEmits(["markerClick"])
	const props = defineProps({
		markerList:{
			type:Array,
			default:()=>[]
		},
		locationState:{
			type:Object,
			default:()=>{}
		},
	})
	const markertap = (e)=>{
	const event =	JSON.parse(JSON.stringify(WeixinMarkerList.value[e.detail.markerId]||{}))
	event.index = event.id
	event.id = event.oId
	center.value = {lat:event.latitude,lng:event.longitude}
	currentMarker.value = event.index;
	emit('markerClick',{event,index:event.index })
	}
	const WeixinMarkerList = ref([]);
	const currentMarker = ref(0);	// 当前选择的 marker 的 index
	// watch(()=>props.markerList,()=>{
	// WeixinMarkerList.value = props.markerList.map((item,index)=>{
	// 		const [lng,lat] = wgs84ToGcj02(item.lng,item.lat)
	// 		return {
	// 			...item,
	// 			oId:item.id,
	// 			id:index,
	// 			latitude: lat,
	// 			longitude: lng,
	// 			iconPath:'/static/book/noSelectMapIcon.png'
	// 		}
	// 	})
	// 	if(WeixinMarkerList.value.length){	
	// 	// center.value = {lat:WeixinMarkerList.value[0].latitude,lng:WeixinMarkerList.value[0].longitude}
	// 	}
	// 	includePoints.value = WeixinMarkerList.value.map((item)=>{
	// 		return {
	// 			latitude:item.latitude,
	// 			longitude:item.longitude
	// 		}
	// 	})
	// },{ deep: true })

	watch(() => props.markerList, () => {
		currentMarker.value = 0;
	});

	watchEffect(()=>{
		WeixinMarkerList.value = props.markerList.map((item,index)=>{
			// todo 兼容谷歌未完善
			// const [lng,lat] = wgs84ToGcj02(item.lng,item.lat)
			return {
				...item,
				oId:item.id,
				id:index,
				latitude: item.lat,
				width:20,
				height:20,
				longitude: item.lng,
				iconPath: currentMarker.value == index ? '/static/book/selectMapIcon.png' : '/static/book/noSelectMapIcon.png'
			}
		});
		includePoints.value = WeixinMarkerList.value.map((item)=>{
			return {
				latitude:item.latitude,
				longitude:item.longitude
			}
		})
		if(props.locationState.latitude && props.locationState.longitude){
			
		center.value = {lat:props.locationState.latitude,lng:props.locationState.longitude}
		includePoints.value.push({
			latitude: center.value.lat,
			longitude: center.value.lng
		})
		}
	})

	const googleMap = ref();
	const marker = ref()

	const selectMarker = ref()
	const defaultCenter = { lat: 22.31615301, lng: 114.16999981 }; //香港的坐标
	const center  = ref(defaultCenter)
	const markerClick=(event,index)=>{
		center.value =  event
		emit('markerClick',{event,index})
	}
</script>

<style lang="scss">
	@import '@/static/style/theme.scss';
	.map {
		width: 100%;
		height: 100%;
	}
	.markerBox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 26rpx;
		text-shadow:
		                -1px -1px 0 #000,
		                1px -1px 0 #000,
		                -1px 1px 0 #000,
		                1px 1px 0 #000;
						
		
	}
	.text{
		margin-bottom: 5rpx;
	}
	.circle{
		width: 46rpx;
		height: 46rpx;
		border-radius: 99rpx;
		border: 8rpx solid #00C8D5;
		background-color: #005A6B;
		
	}
	.circle.click{
		border-radius: 99rpx;
		border: 8rpx solid #049EBB;
		background-color: #00F6D4;
	}
	/* #ifdef MP-XHS */
	xhs-map {
		z-index: 1 !important;
	}
	/* #endif */
</style>