<template>
	<div>
		<div>
			<baidu-map class="map" :center="circleCenter" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" />
		</div>
	<!-- 	<view class="sxBtn">
			<u-icon name="reload" color="#ff5500" size="22" @click="Refresh"></u-icon>
		</view> -->
<!-- 		<span class="footer">
			<u-button style="width: 60%;" text="确 定" type="primary" @click="subMit"></u-button>
		</span> -->
	</div>
</template>

<script>
	import {
		BaiduMap,
	} from "vue-baidu-map";
	export default {
		components: {
			BaiduMap,
		},
		props: ['point'],
		data() {
			return {
				id: "", // 页面id 
				circleCenter: { // 点位信息
					lng: 116.404,
					lat: 39.915
				},
				map: {},
				scope: 50, // 范围
				zoom: 20, // 地图 视线大小
				geocoder: "",
				marker:"",
				localMap:{
					lng:"",
					lat:"",
					address:"",
				}
			}
		},
		mounted() {
			//通过浏览器的Geolocation API获取经纬度
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(this.showPosition);
			} else {
				console.log("Geolocation is not supported by this browser.");
			}
		},
		onLoad(option) {
			this.circleCenter.lng=option.lng
			this.circleCenter.lat=option.lat
		},
		methods: {
			showPosition(position) {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				// this.circleCenter = {
				// 	lng: longitude,
				// 	lat: latitude,
				// };
			},
			handler({
				BMap,
				map
			}) {
				let that = this;
				this.map=map;
				this.geocoder = new BMap.Geolocation(); //通过百度地图 创建地址解析器的实例   获取经纬度
				let point=new BMap.Point(that.circleCenter.lng, that.circleCenter.lat);
				that.map.centerAndZoom(point);
				if(that.marker){
					that.map.removeOverlay(that.marker);
				}
				that.marker = new BMap.Marker(point);
				that.map.addOverlay(that.marker);
			}

		}
	}
</script>

<style scoped  lang="less">
	.map {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.flexs {
		display: flex;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid #f5f5f5;
	}

	.flcol {
		display: flex;
		flex-direction: column;
	}

	.dialog-footer {
		display: flex;

	}
	
	.sxBtn{
		position: fixed;
		top: 10%;
		right: 3%;
		z-index: 999;
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(255, 255, 255, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		box-shadow: 0 0 5rpx 2rpx #999;
		&:active{
			background-color: rgba(255, 255, 255, 1);
		}
	}
	.footer{
		position: fixed;
		bottom: 5%;
		width: 100%;
		text-align: center;
		
	}
</style>