<template>
	<div ref="mapContainer" class="map-container"></div>
</template>

<script lang="ts" setup>
	import { ref, onMounted, computed, watch, onBeforeUnmount, defineProps } from 'vue';
	let props = defineProps({
		lat: {
			type: String,
			default: 22.680964
		},
		lng: {
			type: String,
			default: 113.247185
		}
	})

	const mapContainer = ref(null);
	let lat = ref<any>(props.lat)
	let lng = ref<any>(props.lng)
	let map = ref<any>(null)

	const initMap = () => {
		console.log(lat.value, lng.value)
		let center = new TMap.LatLng(lat.value, lng.value);//设置中心点坐标
		let map = new TMap.Map(mapContainer.value, {
			center: center
		});
		let markerLayer = new TMap.MultiMarker({
			map: map,  //指定地图容器
			//样式定义
			styles: {
				//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
				"myStyle": new TMap.MarkerStyle({
					"width": 25,  // 点标记样式宽度（像素）
					"height": 35, // 点标记样式高度（像素）
					"src": '../img/marker.png',  //图片路径
					"anchor": { x: 16, y: 32 }
				})
			},
			//点标记数据数组 longitude
			geometries: [{
				"id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
				"styleId": 'myStyle',  //指定样式id
				"position": new TMap.LatLng(lat.value, lng.value),  //点标记坐标位置
				"properties": {//自定义属性
					"title": "marker1"
				}
			}
			]
		})
	}
	watch(() => [props.lat, props.lng], (newVal) => {
		lat.value = newVal[0]
		lng.value = newVal[1]
	})

	onMounted(() => {
		initMap()
	})
</script>

<style scoped>
	.map-container {
		width: 100%;
		height: 600px;
	}
</style>