<template>
	<div >
		<div class="divLowerLeft">
			<div class="divBtn">
				<div class="divBtnTitle">
					<uni-icons custom-prefix="iconfont" type="icon-ebikejia" :color="iconcolor" :size="iconsize"
						@click="onZoom('out')" />
				</div>
				<div class="divBtnTitle">
					<uni-icons custom-prefix="iconfont" type="icon-ebikejian" :color="iconcolor" :size="iconsize"
						@click="onZoom('in')" />
				</div>
				<div class="divBtnTitle" style="padding-bottom: 10px;" @click="getLocation">
					<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" :color="iconcolor" :size="iconsize" />
				</div>
		
			</div>
		</div>
		<map id="mapRef" ref="mapRef" show-location style="width: 100%;height: 100vh;" :scale="scale"  :markers="markers"
		 :longitude="mapcenter.longitude" :latitude="mapcenter.latitude"/>
		
	</div>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,onMounted,getCurrentInstance
	} from "vue";
	import * as map from "@/utils/map.js";
	
	const mapRef=ref("mapRef");
	let oMap=null;
	const scale=ref(15);
	const markers=ref();
	const mapcenter=ref({
		longitude:"",latitude:""
	})
	
	onMounted(()=>{
		oMap= map.getMap("mapRef",getCurrentInstance());
	});
	
	onLoad((option) => {
		const {longitude:lng,latitude:lat} = option;
		mapcenter.value={longitude:lng,latitude:lat};
		const arrPoints=markers.value||[];
		arrPoints.push(map.addMarker(arrPoints.length,lng,lat,"bike-choose.png"));
		markers.value=arrPoints;
	});

	//地图缩放
	const onZoom = (lx) => {
		switch (lx) {
			case "out":
				scale.value=scale.value+1;
				break;
			case "in":
				scale.value=scale.value-1;
				break;
		}
	};
	
	//定位
	const getLocation = () => {
		map.getLoalcation(oMap, (res) => {
			const {
				latitude,
				longitude
			} = res;
		})
	}
</script>

<style scoped>
	.divLowerLeft {
		position: absolute;
		z-index: 100;
		left: 10px;
		bottom: 30vh;
	}
	
	.divBtn {
		background-color: white;
		font-size: 12px;
		border-radius: 5px;
		margin-bottom: 5px;
		text-align: center;
		border: 1px solid #80808061;
		padding: 0px 10px;
	}
	
	.divBtnTitle {
		padding-top: 10px;
	}
	
</style>