<template>
	<view>
		<map style="width: 100%; height: 300px;" :latitude="data.latitude" :longitude="data.longitude" :markers="data.covers"> </map>
	</view>
</template>

<script setup>
	import {
		reactive,
	} from "vue"
	import myIcon from "@/static/images/common/markIcon.png"
	import {onLoad} from "@dcloudio/uni-app"

	const data = reactive({
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 39.909,
		longitude: 116.39742,
		covers: [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: myIcon,
		}]
	})
	
	function initLocation() {
		uni.getLocation({
			type: 'gcj02',
			success: function (res) {
				data.longitude = res.longitude;
				data.latitude = res.latitude;
				data.covers[0].longitude = res.longitude;
				data.covers[0].latitude = res.latitude;
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
			}
		});
	}
	
	onLoad(() => {
		initLocation();
	})
	
</script>

<style>

</style>